Browse Source

样式

zhangyong/feature-20250815160302-金币优化
lhl 2 months ago
parent
commit
dd58c2f690
  1. 228
      src/views/refund/gold/coinRefundDetail.vue

228
src/views/refund/gold/coinRefundDetail.vue

@ -164,8 +164,9 @@ const getSelectBy = async function (val) {
} }
}) })
// refundUser.value // refundUser.value
const detailWithoutSort = { ...refundUser.value,
flag: showEmployeeData.value ? 0 : 1
const detailWithoutSort = {
...refundUser.value,
flag: showEmployeeData.value ? 0 : 1
} }
delete detailWithoutSort.sortField delete detailWithoutSort.sortField
delete detailWithoutSort.sortOrder delete detailWithoutSort.sortOrder
@ -193,9 +194,9 @@ const getSelectBy = async function (val) {
tableData.value = tableData.value.map(item => ({ tableData.value = tableData.value.map(item => ({
...item, ...item,
sumGold: (Number(item.sumGold) || 0) ,
permanentGold: (Number(item.permanentGold) || 0) ,
freeGold: (Number(item.freeGold) || 0) ,
sumGold: (Number(item.sumGold) || 0),
permanentGold: (Number(item.permanentGold) || 0),
freeGold: (Number(item.freeGold) || 0),
taskGold: (Number(item.taskGold) || 0) taskGold: (Number(item.taskGold) || 0)
})) }))
console.log('tableData', tableData.value) console.log('tableData', tableData.value)
@ -515,119 +516,110 @@ const getMarket = async function () {
</script> </script>
<template> <template>
<el-card style="margin-bottom: 1vh;">
<el-row style="margin-bottom: 1vh">
<el-col :span="5">
<div class="head-card-element">
<el-text>精网号</el-text>
<el-input v-model="refundUser.jwcode" placeholder="请输入精网号" style="width: 150px" clearable />
</div>
</el-col>
<el-col :span="5">
<div class="head-card-element">
<el-text>商品名称</el-text>
<el-select v-model="refundUser.goodsName" placeholder="请选择商品名称" style="width: 180px" clearable filterable>
<el-option v-for="item in goods" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
</el-col>
<el-col :span="5">
<el-text size="large">所属地区</el-text>
<el-cascader v-model="selectedMarketPath" :options="market" placeholder="请选择所属地区" clearable
style="width:180px" @change="handleMarketChange" />
</el-col>
<el-col :span="5">
<div class="head-card-element">
<el-text>退款类型</el-text>
<el-select v-model="refundUser.refundType" placeholder="请选择退款类型" style="width: 180px" clearable>
<!-- todo 这需要改-->
<el-option v-for="item in refundType" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
</el-col>
<el-col :span="3">
<div class="head-card-element">
<el-checkbox v-model="showEmployeeData" @change="search()">员工数据</el-checkbox>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="head-card-element">
<el-text>退款时间</el-text>
<el-date-picker v-model="getTime" type="datetimerange" range-separator="" start-placeholder="起始时间"
end-placeholder="结束时间" style="width: 400px" @change="handleDatePickerChange"
:default-time="defaultTime" :disabled-date="disabledDate"/>
<el-button @click="getToday()" style="margin-left: 10px"
:type="activeTimeRange === 'today' ? 'primary' : ''">
</el-button>
<el-button @click="getYesterday()" style="margin-left: 10px"
:type="activeTimeRange === 'yesterday' ? 'primary' : ''">
</el-button>
<el-button @click="get7Days()" style="margin-left: 10px"
:type="activeTimeRange === '7days' ? 'primary' : ''"> 近7天
</el-button>
<el-button type="success" @click="reset()">重置</el-button>
<el-button type="primary" @click="search()">查询</el-button>
<el-button type="primary" @click="exportExcel">导出Excel</el-button>
<el-button type="primary" @click="openExportList">查看导出列表</el-button>
</div>
</el-col>
</el-row>
</el-card>
<el-card>
<el-card style="margin-bottom: 1vh;">
<div class="condition">
<div style="display: flex;align-items: center;width:18vw">
<el-text>精网号</el-text>
<el-input v-model="refundUser.jwcode" placeholder="请输入精网号" style="width: 10vw;" clearable />
</div>
<div style="display: flex;align-items: center;width:18vw">
<el-text>商品名称</el-text>
<el-select v-model="refundUser.goodsName" placeholder="请选择商品名称" style="width: 10vw;" clearable filterable>
<el-option v-for="item in goods" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
<div style="display: flex;align-items: center;width:18vw">
<el-text size="large">所属地区</el-text>
<el-cascader v-model="selectedMarketPath" :options="market" placeholder="请选择所属地区" clearable style="width:10vw"
@change="handleMarketChange" />
</div>
<div style="display: flex;align-items: center;width:18vw">
<el-text>退款类型</el-text>
<el-select v-model="refundUser.refundType" placeholder="请选择退款类型" style="width: 10vw" clearable>
<el-option v-for="item in refundType" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
<div>
<el-checkbox v-model="showEmployeeData" @change="search()">员工数据</el-checkbox>
</div>
</div>
<div>
<el-col :span="24">
<div> <div>
退款金币总数{{ format3(Math.abs(sumGolds).toFixed(2)) }}&nbsp;&nbsp;&nbsp;&nbsp;
永久金币{{ format3(Math.abs(permanentGolds).toFixed(2)) }}&nbsp;&nbsp;&nbsp;&nbsp;
免费金币{{ format3(Math.abs(freeGolds).toFixed(2)) }}&nbsp;&nbsp;&nbsp;&nbsp;
任务金币{{ format3(Math.abs(taskGolds).toFixed(2)) }}
</div>
<!-- 设置表格容器的高度和滚动样式 -->
<div style="height: 55vh; overflow-y: auto;">
<el-table :data="tableData" style="width: 82vw" @sort-change="handleSortChange" height="520px">
<el-table-column type="index" label="序号" width="80px" fixed="left">
<template #default="scope">
<span>{{
scope.$index + 1 + (getObj.pageNum - 1) * getObj.pageSize
}}</span>
</template>
</el-table-column>
<el-table-column prop="name" label="姓名" fixed="left" width="130px" show-overflow-tooltip />
<el-table-column prop="jwcode" label="精网号" fixed="left" width="110px" />
<el-table-column prop="market" label="所属地区" width="110px" />
<el-table-column prop="orderCode" label="订单号" width="260px" show-overflow-tooltip />
<el-table-column prop="goodsName" label="商品名称" width="110px" show-overflow-tooltip />
<el-table-column prop="refundType" label="退款类型" width="100px" />
<el-table-column prop="sumGold" label="退款金币总数" width="150px" sortable="custom" />
<el-table-column prop="refundModel" label="退款方式" width="110px">
<template #default="scope">
{{ scope.row.refundModel === 0 ? '全部退款' : scope.row.refundModel === 1 ? '部分退款' : '' }}
</template>
</el-table-column>
<el-table-column prop="permanentGold" label="永久金币" width="110px" sortable="custom" />
<el-table-column prop="freeGold" sortable="custom" label="免费金币" width="110px" />
<el-table-column prop="taskGold" sortable="custom" label="任务金币" width="110px" />
<el-table-column prop="remark" label="退款原因" width="160px" show-overflow-tooltip />
<el-table-column prop="adminName" label="提交人" width="100px" />
<el-table-column prop="auditTime" sortable="custom" label="退款时间" width="180px">
<template #default="scope">
{{ moment(scope.row.auditTime).format('YYYY-MM-DD HH:mm:ss') }}
</template>
</el-table-column>
</el-table>
</div>
<el-text>退款时间</el-text>
<el-date-picker v-model="getTime" type="datetimerange" range-separator="" start-placeholder="起始时间"
end-placeholder="结束时间" style="width: 20vw;" @change="handleDatePickerChange" :default-time="defaultTime"
:disabled-date="disabledDate" />
<el-button @click="getToday()" style="margin-left: 10px" :type="activeTimeRange === 'today' ? 'primary' : ''">
</el-button>
<el-button @click="getYesterday()" style="margin-left: 10px"
:type="activeTimeRange === 'yesterday' ? 'primary' : ''">
</el-button>
<el-button @click="get7Days()" style="margin-left: 10px" :type="activeTimeRange === '7days' ? 'primary' : ''">
近7天
</el-button>
<!-- 分页 -->
<div class="pagination" style="margin-top: 20px;display: flex;">
<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" @jump="checkPageNumber"></el-pagination>
<el-button type="success" @click="reset()">重置</el-button>
<el-button type="primary" @click="search()">查询</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>
</div>
</el-card>
<el-card>
<div>
退款金币总数{{ format3(Math.abs(sumGolds).toFixed(2)) }}&nbsp;&nbsp;&nbsp;&nbsp;
永久金币{{ format3(Math.abs(permanentGolds).toFixed(2)) }}&nbsp;&nbsp;&nbsp;&nbsp;
免费金币{{ format3(Math.abs(freeGolds).toFixed(2)) }}&nbsp;&nbsp;&nbsp;&nbsp;
任务金币{{ format3(Math.abs(taskGolds).toFixed(2)) }}
</div>
<!-- 设置表格容器的高度和滚动样式 -->
<div style="height: 55vh; overflow-y: auto;">
<el-table :data="tableData" style="width: 82vw;height:55vh" @sort-change="handleSortChange">
<el-table-column type="index" label="序号" width="80px" fixed="left">
<template #default="scope">
<span>{{
scope.$index + 1 + (getObj.pageNum - 1) * getObj.pageSize
}}</span>
</template>
</el-table-column>
<el-table-column prop="name" label="姓名" fixed="left" width="130px" show-overflow-tooltip />
<el-table-column prop="jwcode" label="精网号" fixed="left" width="110px" />
<el-table-column prop="market" label="所属地区" width="110px" />
<el-table-column prop="orderCode" label="订单号" width="260px" show-overflow-tooltip />
<el-table-column prop="goodsName" label="商品名称" width="110px" show-overflow-tooltip />
<el-table-column prop="refundType" label="退款类型" width="100px" />
<el-table-column prop="sumGold" label="退款金币总数" width="150px" sortable="custom" />
<el-table-column prop="refundModel" label="退款方式" width="110px">
<template #default="scope">
{{ scope.row.refundModel === 0 ? '全部退款' : scope.row.refundModel === 1 ? '部分退款' : '' }}
</template>
</el-table-column>
<el-table-column prop="permanentGold" label="永久金币" width="110px" sortable="custom" />
<el-table-column prop="freeGold" sortable="custom" label="免费金币" width="110px" />
<el-table-column prop="taskGold" sortable="custom" label="任务金币" width="110px" />
<el-table-column prop="remark" label="退款原因" width="160px" show-overflow-tooltip />
<el-table-column prop="adminName" label="提交人" width="100px" />
<el-table-column prop="auditTime" sortable="custom" label="退款时间" width="180px">
<template #default="scope">
{{ moment(scope.row.auditTime).format('YYYY-MM-DD HH:mm:ss') }}
</template>
</el-table-column>
</el-table>
</div>
<!-- 分页 -->
<div class="pagination" style="margin-top: 20px;display: flex;">
<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" @jump="checkPageNumber"></el-pagination>
</div>
</el-card>
<!-- 导出弹窗 --> <!-- 导出弹窗 -->
<el-dialog v-model="exportListVisible" title="导出列表" width="80%"> <el-dialog v-model="exportListVisible" title="导出列表" width="80%">
@ -663,7 +655,9 @@ const getMarket = async function () {
</template> </template>
<style scoped> <style scoped>
.head-card-element {
margin-right: 20px;
.condition{
display: flex;
width:82vw;
margin-bottom: 0.5vh;
} }
</style> </style>
Loading…
Cancel
Save