You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

585 lines
19 KiB

2 months ago
3 months ago
2 months ago
4 months ago
4 months ago
3 months ago
4 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
3 months ago
3 months ago
4 months ago
3 months ago
3 months ago
4 months ago
4 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
  1. <template>
  2. <el-card style="margin-bottom: 0.5vh;">
  3. <el-col style="margin-bottom: 0.5vh">
  4. <el-text size="large">精网号</el-text>
  5. <el-input v-model="searchForm.jwcode" placeholder="请输入精网号" style="width: 12vw;margin-right:1vw" clearable/>
  6. <el-text size="large">商品名称</el-text>
  7. <el-select v-model="searchForm.goodsName" placeholder="请输入商品名称" style="width: 12vw;margin-right:1vw"
  8. clearable>
  9. <el-option v-for="item in refundGoodsOptions" :key="item" :label="item" :value="item"></el-option>
  10. </el-select>
  11. <el-text size="large">退款类型</el-text>
  12. <el-select v-model="searchForm.refundType" placeholder="请选择" style="width: 12vw;margin-right:1vw" clearable>
  13. <el-option label="商品退款" value="商品退款"/>
  14. <el-option label="金币退款" value="金币退款"/>
  15. </el-select>
  16. <el-text size="large">所属地区</el-text>
  17. <el-cascader v-model="selectedMarketPath" :options="market" placeholder="请选择所属地区" clearable
  18. style="width:12vw"
  19. @change="handleMarketChange"/>
  20. </el-col>
  21. <el-col>
  22. <el-text size="large">
  23. {{ activeName === 'wait' ? '提交时间:' : '审核时间:' }}
  24. </el-text>
  25. <el-date-picker v-model="dateRange" type="datetimerange" range-separator="" start-placeholder="开始时间"
  26. end-placeholder="结束时间" style="margin-right:1vw;width:25vw"
  27. @change="handleDatePickerChange" :default-time="defaultTime" :disabled-date="disabledDate"/>
  28. <el-button @click="getToday()" :type="activeTimeRange === 'today' ? 'primary' : ''"></el-button>
  29. <el-button @click="getYesterday()" :type="activeTimeRange === 'yesterday' ? 'primary' : ''"></el-button>
  30. <el-button @click="get7Days()" :type="activeTimeRange === '7days' ? 'primary' : ''">近7天</el-button>
  31. <el-button type="success" @click="resetSearch">重置</el-button>
  32. <el-button type="primary" @click="handleSearch">查询</el-button>
  33. </el-col>
  34. </el-card>
  35. <el-card>
  36. <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
  37. <el-tab-pane label="待审核" name="wait"></el-tab-pane>
  38. <el-tab-pane label="已通过" name="pass"></el-tab-pane>
  39. <el-tab-pane label="已驳回" name="reject"></el-tab-pane>
  40. </el-tabs>
  41. <div>
  42. 退款总金币数{{ format3((stats.permanentGolds + stats.freeGolds + stats.taskGolds).toFixed(2)) }}金币&nbsp;&nbsp;&nbsp;&nbsp;
  43. 永久金币{{ format3(stats.permanentGolds.toFixed(2)) }}金币&nbsp;&nbsp;&nbsp;&nbsp;
  44. 免费金币{{ format3(stats.freeGolds.toFixed(2)) }}金币&nbsp;&nbsp;&nbsp;&nbsp;
  45. 任务金币{{ format3(stats.taskGolds.toFixed(2)) }}金币
  46. </div>
  47. <el-table :data="tableData" style="height:54vh;width:82vw" @sort-change="handleSortChange">
  48. <el-table-column type="index" label="序号" width="60"/>
  49. <el-table-column prop="name" label="姓名" width="120" show-overflow-tooltip/>
  50. <el-table-column prop="jwcode" label="精网号" width="120"/>
  51. <el-table-column prop="market" label="所属地区" width="120"/>
  52. <el-table-column prop="orderCode" label="订单号" width="260px" show-overflow-tooltip/>
  53. <el-table-column prop="refundType" label="退款类型" width="120"/>
  54. <el-table-column prop="refundModel" label="退款方式" width="120">
  55. <template #default="{ row }">
  56. {{ row.refundModel === 0 ? '全部退款' : '部分退款' }}
  57. </template>
  58. </el-table-column>
  59. <el-table-column prop="goodsName" label="退款商品" width="120" show-overflow-tooltip/>
  60. <el-table-column prop="sumGold" label="退款金币总数" width="160" sortable="custom">
  61. <template #default="{ row }">
  62. {{ row.sumGold / 100 }}
  63. </template>
  64. </el-table-column>
  65. <el-table-column prop="permanentGold" label="永久金币" width="120" sortable="custom">
  66. <template #default="{ row }">
  67. {{ row.permanentGold / 100 }}
  68. </template>
  69. </el-table-column>
  70. <el-table-column prop="freeGold" label="免费金币" width="120" sortable="custom">
  71. <template #default="{ row }">
  72. {{ (row.freeJune + row.freeDecember) / 100 }}
  73. </template>
  74. </el-table-column>
  75. <el-table-column prop="taskGold" label="任务金币" width="120" sortable="custom">
  76. <template #default="{ row }">
  77. {{ row.taskGold / 100 }}
  78. </template>
  79. </el-table-column>
  80. <el-table-column prop="remark" label="备注" width="150" show-overflow-tooltip/>
  81. <el-table-column prop="adminName" label="提交人" width="120"/>
  82. <el-table-column v-if="checkTab === 'reject'" prop="rejectReason" label="驳回理由" width="150"
  83. show-overflow-tooltip/>
  84. <el-table-column v-if="checkTab !== 'pending'" prop="auditName" label="审核人" width="120"/>
  85. <el-table-column prop="createTime" label="提交时间" width="180" sortable="custom">
  86. <template #default="{ row }">
  87. {{
  88. checkTab === 'pending'
  89. ? moment(row.auditTime).format('YYYY-MM-DD HH:mm:ss')
  90. : moment(row.createTime).format('YYYY-MM-DD HH:mm:ss')
  91. }}
  92. </template>
  93. </el-table-column>
  94. <el-table-column v-if="checkTab !== 'pending'" prop="auditTime" label="审核时间" width="180">
  95. <template #default="{ row }">
  96. {{ row.auditTime ? moment(row.auditTime).format('YYYY-MM-DD HH:mm:ss') : '--' }}
  97. </template>
  98. </el-table-column>
  99. <el-table-column v-if="checkTab === 'pending'" fixed="right" prop="operation" label="操作" width="150px">
  100. <template #default="scope">
  101. <div class="operation">
  102. <el-popconfirm title="确定要通过此条记录吗?" @confirm="handleApprove(scope.row)">
  103. <template #reference>
  104. <el-button :disabled="clicked || cancelClicked" type="primary" text>
  105. 通过
  106. </el-button>
  107. </template>
  108. <template #actions="{ confirm, cancel }">
  109. <el-button size="small" @click="cancel">取消</el-button>
  110. <el-button type="primary" size="small" :disabled="clicked" @click="confirm">
  111. 确认
  112. </el-button>
  113. </template>
  114. </el-popconfirm>
  115. <el-button :disabled="clicked || cancelClicked" type="primary" text @click="showRejectDialog(scope.row)">
  116. 驳回
  117. </el-button>
  118. </div>
  119. </template>
  120. </el-table-column>
  121. </el-table>
  122. <el-pagination class="pagination" v-model:current-page="pagination.pageNum" v-model:page-size="pagination.pageSize"
  123. layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
  124. @size-change="handlePageSizeChange"
  125. @current-change="handleCurrentChange"></el-pagination>
  126. </el-card>
  127. <el-dialog v-model="rejectDialogVisible" title="驳回理由" width="500px">
  128. <el-form>
  129. <el-form-item label="驳回理由" required>
  130. <el-input v-model="rejectReason" type="textarea" :rows="4" placeholder="请输入驳回理由" maxlength="200"
  131. show-word-limit/>
  132. </el-form-item>
  133. </el-form>
  134. <template #footer>
  135. <span class="dialog-footer">
  136. <el-button @click="rejectDialogVisible = false">取消</el-button>
  137. <el-button type="primary" @click="handleReject">确定</el-button>
  138. </span>
  139. </template>
  140. </el-dialog>
  141. </template>
  142. <script setup>
  143. import {onMounted, reactive, ref} from 'vue'
  144. import {ElMessage} from 'element-plus'
  145. import API from '@/util/http.js'
  146. import moment from 'moment'
  147. import {useAdminStore} from "@/store/index.js";
  148. import {storeToRefs} from "pinia";
  149. import {findMenuById, permissionMapping} from "@/utils/menuTreePermission.js"
  150. import dayjs from "dayjs";
  151. const adminStore = useAdminStore();
  152. const {adminData, menuTree} = storeToRefs(adminStore);
  153. const defaultTime = [
  154. new Date(2000, 1, 1, 0, 0, 0),
  155. new Date(2000, 2, 1, 23, 59, 59),
  156. ]
  157. // 当前激活的时间按钮
  158. const activeTimeRange = ref('')
  159. const scopeValue = ref(null) // 当前行
  160. const rejectDialogVisible = ref(false)
  161. const rejectReason = ref('')
  162. // 状态常量
  163. const STATUS = {
  164. PENDING: 0, // 待审核
  165. APPROVED: 1, // 通过
  166. REJECTED: 2 // 驳回
  167. }
  168. //无法选择的时间
  169. const disabledDate = (time) => {
  170. const limitDate = new Date(2025, 0, 1);
  171. return time.getTime() < limitDate.getTime();
  172. }
  173. // 搜索表单数据
  174. const searchForm = ref({
  175. jwcode: '',
  176. refundModel: '',
  177. goodsName: '',
  178. market: "",
  179. startTime: '',
  180. endTime: '',
  181. auditStatus: '0'
  182. })
  183. const checkTab = ref('pending') // 能否不用STATUS常量,0是待审批,1是已通过,2是驳回,参数status需要Integer
  184. const dateRange = ref([])
  185. const pagination = ref({
  186. pageNum: 1,
  187. pageSize: 50,
  188. total: 0
  189. })
  190. const tableData = ref([])
  191. const marketOptions = ref([])
  192. const refundGoodsOptions = ref([])
  193. const adminInfo = ref({})
  194. // 统计合计数
  195. const stats = ref({
  196. totalNum: 0,
  197. totalCoins: 0,
  198. permanentGolds: 0,
  199. freeGolds: 0,
  200. taskGolds: 0
  201. })
  202. const rejectVisible = ref(false)
  203. const rejectObj = ref({})
  204. const passObj = ref({})
  205. // 标签页默认是待审批
  206. const activeName = ref('wait')
  207. const sortField = ref('')
  208. const sortOrder = ref('')
  209. const market = ref("")
  210. // 处理排序事件
  211. const handleSortChange = (column) => {
  212. if (column.prop === 'sumGold') {
  213. sortField.value = 'sum_gold'
  214. } else if (column.prop === 'permanentGold') {
  215. sortField.value = 'permanent_gold'
  216. } else if (column.prop === 'freeGold') {
  217. sortField.value = 'freeGold'
  218. } else if (column.prop === 'taskGold') {
  219. sortField.value = 'task_gold'
  220. } else if (column.prop === 'createTime') {
  221. sortField.value = 'create_time'
  222. } else if (column.prop === 'auditTime') {
  223. sortField.value = 'audit_time'
  224. } else {
  225. sortField.value = ''
  226. }
  227. sortOrder.value = column.order === 'ascending' ? 'asc' : 'desc'
  228. console.log('排序字段:', sortField.value)
  229. console.log('排序方式:', sortOrder.value)
  230. get()
  231. }
  232. // 显示驳回对话框
  233. const showRejectDialog = (row) => {
  234. scopeValue.value = row
  235. rejectReason.value = ''
  236. rejectDialogVisible.value = true
  237. }
  238. // 查商品名
  239. const getRefundGoods = async () => {
  240. try {
  241. const res = await API({url: '/general/goods'})
  242. refundGoodsOptions.value = res.data || []
  243. } catch (error) {
  244. console.error('获取商品列表失败', error)
  245. }
  246. }
  247. // 搜索方法
  248. const get = async function (val) {
  249. try {
  250. if (typeof val === 'number') {
  251. pagination.value.pageNum = val
  252. }
  253. if (dateRange.value && dateRange.value.length === 2) {
  254. searchForm.value.startTime = moment(dateRange.value[0]).format('YYYY-MM-DD HH:mm:ss')
  255. searchForm.value.endTime = moment(dateRange.value[1]).format('YYYY-MM-DD HH:mm:ss')
  256. } else {
  257. searchForm.value.startTime = ''
  258. searchForm.value.endTime = ''
  259. }
  260. // if (searchForm.value.market === '总部' || searchForm.value.market === '研发部') {
  261. // searchForm.value.market = '';
  262. // }
  263. const params = {
  264. pageNum: pagination.value.pageNum,
  265. pageSize: pagination.value.pageSize,
  266. refundAudit: {
  267. ...searchForm.value,
  268. sortField: sortField.value,
  269. sortOrder: sortOrder.value
  270. }
  271. }
  272. console.log('看看传给后端的参数:', params)
  273. // 校验精网号(数字格式)
  274. if (searchForm.value.jwcode) {
  275. // 纯数字
  276. const numberRegex = /^\d{1,9}$/;
  277. // 检查是否不是数字
  278. if (!numberRegex.test(searchForm.value.jwcode)) {
  279. ElMessage.error('请检查精网号格式')
  280. // 上面提示过了
  281. return
  282. }
  283. }
  284. const res = await API({url: '/audit/selectRefund', data: params})
  285. tableData.value = res.list || []
  286. pagination.value.total = res.total || 0
  287. console.log('查全部的total', pagination.value.total, res.total)
  288. } catch (error) {
  289. console.error('获取数据失败', error)
  290. }
  291. }
  292. const clicked = ref(false);
  293. // 通过
  294. const handleApprove = async (row) => {
  295. clicked.value = true
  296. if (findMenuById(menuTree.value, permissionMapping.Refund_Approval)) {
  297. try {
  298. const params = {
  299. orderCode: row.orderCode,
  300. auditId: adminData.value.id,
  301. action: 1,// action的1是通过,2是驳回
  302. rejectReason: ''
  303. }
  304. await API({url: '/audit/audit', data: params})
  305. ElMessage.success('审核通过成功')
  306. await get()
  307. clicked.value = false
  308. await getStats()
  309. } catch (error) {
  310. console.error('审核通过失败', error)
  311. ElMessage.error('操作失败')
  312. }
  313. } else {
  314. ElMessage.warning('没有权限')
  315. clicked.value = false
  316. }
  317. }
  318. //控制驳回确认按钮禁用状态
  319. const cancelClicked = ref(false)
  320. // 处理驳回操作
  321. const handleReject = async () => {
  322. cancelClicked.value = true
  323. if (findMenuById(menuTree.value, permissionMapping.Refund_Approval)) {
  324. if (!rejectReason.value.trim()) {
  325. ElMessage.warning('请输入驳回理由')
  326. return
  327. }
  328. try {
  329. const params = {
  330. orderCode: scopeValue.value.orderCode,
  331. auditId: adminData.value.id,
  332. action: 2,
  333. rejectReason: rejectReason.value
  334. }
  335. await API({url: '/audit/audit', data: params})
  336. ElMessage.success('驳回成功')
  337. rejectDialogVisible.value = false
  338. await get()
  339. cancelClicked.value = false
  340. await getStats()
  341. console.log('看看驳回参数', params)
  342. } catch (error) {
  343. console.error('驳回失败', error)
  344. ElMessage.error('操作失败')
  345. }
  346. } else {
  347. ElMessage.warning('没有权限')
  348. cancelClicked.value = false
  349. }
  350. }
  351. const getStats = async () => {
  352. try {
  353. const params = {
  354. pageNum: pagination.value.pageNum,
  355. pageSize: pagination.value.pageSize,
  356. refundAudit: {
  357. ...searchForm.value
  358. }
  359. }
  360. if (searchForm.value.jwcode) {
  361. // 纯数字
  362. const numberRegex = /^\d{1,9}$/;
  363. // 检查是否不是数字
  364. if (!numberRegex.test(searchForm.value.jwcode)) {
  365. // ElMessage.error('精网号必须为数字格式')
  366. // 上面提示过了
  367. return
  368. }
  369. }
  370. const res = await API({
  371. url: '/audit/sumRefundGold',
  372. data: params
  373. })
  374. stats.value.totalNum = res.totalNum
  375. stats.value.permanentGolds = res.permanentGolds / 100
  376. stats.value.freeGolds = res.freeGolds / 100
  377. stats.value.taskGolds = res.taskGolds / 100
  378. console.log('see see stats和搜索对象', stats.value, params)
  379. } catch (error) {
  380. console.log('请求失败', error)
  381. }
  382. }
  383. // 搜索
  384. const handleSearch = function () {
  385. trimJwCode()
  386. get()
  387. getStats()
  388. }
  389. // 重置
  390. const resetSearch = function () {
  391. const auditStatus = searchForm.value.auditStatus;
  392. searchForm.value = {
  393. jwcode: '',
  394. refundType: '',
  395. goodsName: '',
  396. market: "",
  397. startTime: '',
  398. endTime: '',
  399. sortField: '',
  400. sortOrder: '',
  401. auditStatus: auditStatus
  402. }
  403. dateRange.value = []
  404. activeTimeRange.value = '' // 清除激活状态
  405. selectedMarketPath.value = []
  406. get()
  407. getStats()
  408. }
  409. // 今天
  410. const getToday = function () {
  411. const today = dayjs()
  412. const startTime = today.startOf('day').format('YYYY-MM-DD HH:mm:ss')
  413. const endTime = today.endOf('day').format('YYYY-MM-DD HH:mm:ss')
  414. dateRange.value = [startTime, endTime]
  415. console.log('dateRange', dateRange.value)
  416. activeTimeRange.value = 'today'
  417. get()
  418. getStats()
  419. }
  420. // 昨天
  421. const getYesterday = function () {
  422. const today = dayjs()
  423. const startTime = today.subtract(1, 'day').startOf('day').format('YYYY-MM-DD HH:mm:ss')
  424. const endTime = today.subtract(1, 'day').endOf('day').format('YYYY-MM-DD HH:mm:ss')
  425. dateRange.value = [startTime, endTime]
  426. console.log('dateRange', dateRange.value)
  427. activeTimeRange.value = 'yesterday'
  428. get()
  429. getStats()
  430. }
  431. // 近7天
  432. const get7Days = function () {
  433. const today = dayjs()
  434. const startTime = today.subtract(6, 'day').startOf('day').format('YYYY-MM-DD HH:mm:ss')
  435. const endTime = today.endOf('day').format('YYYY-MM-DD HH:mm:ss')
  436. dateRange.value = [startTime, endTime]
  437. console.log('dateRange', dateRange.value)
  438. activeTimeRange.value = '7days'
  439. get()
  440. getStats()
  441. }
  442. const handleClick = function (tab, event) {
  443. activeName.value = tab.props.name
  444. if (tab.props.name === 'wait') {
  445. adminWait()
  446. } else if (tab.props.name === 'pass') {
  447. adminPass()
  448. } else if (tab.props.name === 'reject') {
  449. adminReject()
  450. }
  451. }
  452. // 当前状态
  453. const getCurrentStatus = () => {
  454. switch (activeName.value) {
  455. case 'wait':
  456. return STATUS.PENDING
  457. case 'pass':
  458. return STATUS.APPROVED
  459. case 'reject':
  460. return STATUS.REJECTED
  461. default:
  462. return ''
  463. }
  464. }
  465. // 待审核
  466. const adminWait = async function () {
  467. checkTab.value = 'pending'
  468. searchForm.value.auditStatus = STATUS.PENDING
  469. await get()
  470. await getStats()
  471. }
  472. // 已通过
  473. const adminPass = async function () {
  474. checkTab.value = 'pass'
  475. searchForm.value.auditStatus = STATUS.APPROVED
  476. await get()
  477. await getStats()
  478. }
  479. // 已驳回
  480. const adminReject = async function () {
  481. checkTab.value = 'reject'
  482. searchForm.value.auditStatus = STATUS.REJECTED
  483. await get()
  484. await getStats()
  485. }
  486. const selectedMarketPath = ref("")
  487. const handleMarketChange = (value) => {
  488. if (value && value.length > 0) {
  489. searchForm.value.market = value[value.length - 1]
  490. } else {
  491. searchForm.value.market = ''
  492. }
  493. }
  494. // 获取地区,修改为级联下拉框
  495. const getMarket = async function () {
  496. try {
  497. const result = await API({
  498. url: '/market/selectMarket',
  499. })
  500. console.log('请求成功', result)
  501. // 递归转换树形结构为级联选择器需要的格式(跳过第一级节点)
  502. const transformTree = (nodes) => {
  503. // 直接处理第一级节点的子节点
  504. const allChildren = nodes.flatMap(node => node.children || []);
  505. return allChildren.map(child => {
  506. const grandchildren = child.children && child.children.length
  507. ? transformTree([child]) // 递归处理子节点
  508. : null;
  509. return {
  510. value: child.name,
  511. label: child.name,
  512. children: grandchildren
  513. };
  514. });
  515. };
  516. market.value = transformTree(result.data)
  517. console.log('转换后的地区树==============', market.value)
  518. } catch (error) {
  519. console.log('请求失败', error)
  520. }
  521. }
  522. const trimJwCode = () => {
  523. if (searchForm.value.jwcode) {
  524. searchForm.value.jwcode = searchForm.value.jwcode.replace(/\s/g, '');
  525. }
  526. }
  527. // 日期选择器变化时清除按钮激活状态
  528. const handleDatePickerChange = () => {
  529. activeTimeRange.value = ''
  530. }
  531. const format3 = (num) => {
  532. // 每三位添加逗号
  533. return num.toLocaleString('en-US')
  534. }
  535. // 表单验证
  536. const rules = reactive({
  537. reason: [{required: true, message: '请输入驳回理由', trigger: 'blur'}]
  538. })
  539. const handlePageSizeChange = function (val) {
  540. pagination.value.pageSize = val
  541. get()
  542. }
  543. const handleCurrentChange = function (val) {
  544. pagination.value.pageNum = val
  545. get()
  546. }
  547. onMounted(async () => {
  548. getRefundGoods()
  549. await getMarket()
  550. await get()
  551. await getStats()
  552. })
  553. </script>
  554. <style scoped>
  555. .pagination {
  556. display: flex;
  557. margin-top: 0.5vh;
  558. }
  559. .operation {
  560. display: flex;
  561. }
  562. </style>