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.
820 lines
29 KiB
820 lines
29 KiB
<template>
|
|
<div class="content">
|
|
<!-- 搜索区域：删除客服专属的“订单状态”筛选，保留总部财务所需筛选项 -->
|
|
<div class="div-card1">
|
|
<el-card class="card1" style="margin-bottom: 0.5vh; min-height: 110px;">
|
|
<div class="row">
|
|
<div class="rowItem">
|
|
<el-text style="width: 4vw;">精网号</el-text>
|
|
<el-input v-model="searchData.jwcode" placeholder="请输入精网号" style="width:10vw;" clearable></el-input>
|
|
</div>
|
|
<div class="rowItem">
|
|
<el-text style="width: 4vw;">客户姓名</el-text>
|
|
<el-input v-model="searchData.name" placeholder="请输入客户姓名" style="width:10vw;" clearable></el-input>
|
|
</div>
|
|
<div class="rowItem">
|
|
<el-text style="width: 4vw;">所属地区</el-text>
|
|
<el-select v-model="searchData.market" placeholder="请选择所属地区" style="width:10vw;" clearable>
|
|
<el-option v-for="item in marketList" :key="item" :label="item" :value="item"/>
|
|
</el-select>
|
|
</div>
|
|
<!-- 总部财务不显示“订单状态”，显示“付款币种” -->
|
|
<div class="rowItem">
|
|
<el-text style="width: 4vw;">付款币种</el-text>
|
|
<el-select v-model="searchData.paymentCurrency" placeholder="请选择付款币种" style="width: 10vw;" clearable>
|
|
<el-option v-for="item in customOptions" :key="item" :label="item" :value="item"/>
|
|
</el-select>
|
|
</div>
|
|
<div class="rowItem">
|
|
<el-text style="width: 4vw;">支付方式</el-text>
|
|
<el-select v-model="searchData.payType" placeholder="请选择支付方式" style="width: 10vw;" clearable>
|
|
<el-option v-for="item in paytypeList" :key="item" :label="item" :value="item"/>
|
|
</el-select>
|
|
</div>
|
|
</div>
|
|
<div class="row" style="margin-top: 10px;">
|
|
<div class="rowItem">
|
|
<el-text style="width: 4vw;">活动名称</el-text>
|
|
<el-select v-model="searchData.activity" placeholder="请选择活动方式" style="width: 10vw;" clearable>
|
|
<el-option v-for="item in activityList" :key="item.id" :label="item.activityName" :value="item.id"/>
|
|
</el-select>
|
|
</div>
|
|
<div class="rowItem">
|
|
<el-text style="width: 4vw;">产品名称</el-text>
|
|
<el-cascader v-model="searchData.goodsName" :options="productList" style="width: 10vw;" clearable/>
|
|
</div>
|
|
<div class="rowItem" style="width: 30vw">
|
|
<el-text style="width: 4vw; margin-left: 0.5vw;">付款时间</el-text>
|
|
<el-date-picker v-model="getTime" type="datetimerange" range-separator="至"
|
|
start-placeholder="起始时间" end-placeholder="结束时间" style="width: 22vw; "
|
|
@change="handleDatePickerChange" :default-time="defaultTime"
|
|
:disabled-date="disabledDate"/>
|
|
</div>
|
|
<!-- 总部财务查询/重置按钮 -->
|
|
<div class="buttons">
|
|
<el-button type="primary" @click="search">查询</el-button>
|
|
<el-button type="success" @click="reset">重置</el-button>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
</div>
|
|
|
|
|
|
<!-- 数据展示区域：仅保留总部财务的“已通过/已完成”标签 -->
|
|
<div class="div-card2">
|
|
<el-card class="card2">
|
|
<div class="btns">
|
|
<!-- 总部财务仅显示“已通过/已完成”标签 -->
|
|
<div class="tabs">
|
|
<el-button-group>
|
|
<el-button class="btnItem"
|
|
:style="{ backgroundColor: activeTab === 'pass' ? '#2741DE' : '#E5EBFE', color: activeTab === 'pass' ? 'white' : '#666' }"
|
|
@click="navigateTo('pass')">
|
|
已通过
|
|
</el-button>
|
|
<el-button class="btnItem"
|
|
:style="{ backgroundColor: activeTab === 'done' ? '#2741DE' : '#E5EBFE', color: activeTab === 'done' ? 'white' : '#666' }"
|
|
@click="navigateTo('done')">
|
|
已完成
|
|
</el-button>
|
|
</el-button-group>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 表格：删除客服/地区财务专属列 -->
|
|
<div class="table">
|
|
<el-table :data="tableData" style="width: 80vw;height:54vh;" @sort-change="handleSortChange"
|
|
:row-style="{ height: '60px' }" :header-cell-style="{ textAlign: 'center' }"
|
|
:cell-style="{ textAlign: 'center' }">
|
|
<el-table-column type="index" label="序号" width="100px" fixed="left">
|
|
<template #default="scope">
|
|
<span>{{ scope.$index + 1 + (pageInfo.pageNum - 1) * pageInfo.pageSize }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column fixed="left" prop="jwcode" label="Homily ID" width="110px"/>
|
|
<el-table-column fixed="left" prop="name" label="姓名" width="110px"/>
|
|
<el-table-column prop="marketName" label="所属地区" width="80px"/>
|
|
<el-table-column prop="activity" label="活动名称" width="120px" show-overflow-tooltip/>
|
|
<el-table-column prop="goodsName" label="产品名称" width="120px"/>
|
|
<el-table-column prop="goodNum" label="产品数量" width="130px">
|
|
<template #default="scope">
|
|
<span v-if="scope.row.goodsName == '金币充值'">{{ scope.row.permanentGold }}</span>
|
|
<span v-else>{{ scope.row.goodNum }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="paymentCurrency" label="付款币种" width="100px"/>
|
|
<el-table-column prop="paymentAmount" label="付款金额" width="120px"/>
|
|
<!-- 总部财务显示“到账币种/金额/手续费”列 -->
|
|
<el-table-column prop="receivedCurrency" label="到账币种"
|
|
v-if="activeTab == 'pass' || activeTab == 'done'" width="150px"></el-table-column>
|
|
<el-table-column prop="receivedAmount" label="到账金额"
|
|
v-if="activeTab == 'pass' || activeTab == 'done'" width="150px">
|
|
<template #default="scope">
|
|
<div v-if="!scope.row.receivedAmount">
|
|
<text style="color: #FA5A1E;">待补充</text>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="handlingCharge" label="手续费"
|
|
v-if="activeTab == 'pass' || activeTab == 'done'" width="150px">
|
|
<template #default="scope">
|
|
<div v-if="!scope.row.handlingCharge == null">
|
|
<text style="color: #FA5A1E;">待补充</text>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="payType" label="支付方式" width="130px"/>
|
|
<el-table-column prop="payTime" label="付款时间" width="180px"/>
|
|
<el-table-column prop="voucher" label="转账凭证" width="110px">
|
|
<template #default="scope">
|
|
<div v-if="scope.row.voucher"
|
|
style="display: flex; justify-content: center; align-items: center; cursor: pointer;"
|
|
@click="previewImage(scope.row.voucher)">
|
|
<img :src="scope.row.voucher" alt="支付凭证" style="width: auto; height: 40px;">
|
|
</div>
|
|
<div v-else
|
|
style="display: flex; justify-content: center; align-items: center; height: 40px;">
|
|
——
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="submitterName" label="提交人" width="150px" show-overflow-tooltip></el-table-column>
|
|
<!-- 总部财务显示“审核人/到账时间”列 -->
|
|
<el-table-column prop="auditName" label="审核人"
|
|
v-if="activeTab == 'pass' || activeTab == 'done'"
|
|
width="150px" show-overflow-tooltip></el-table-column>
|
|
<el-table-column prop="receivedTime" label="到账时间"
|
|
v-if="activeTab == 'pass' || activeTab == 'done'" width="180px"/>
|
|
<el-table-column prop="remark" label="备注" width="150px" show-overflow-tooltip></el-table-column>
|
|
<!-- 已完成状态显示订单状态（正常/退款） -->
|
|
<el-table-column prop="status" label="订单状态" v-if="activeTab == 'done'" width="150px"
|
|
show-overflow-tooltip>
|
|
<template #default="scope">
|
|
<span v-if="scope.row.status == 6">退款</span>
|
|
<span v-else>正常</span>
|
|
</template>
|
|
</el-table-column>
|
|
<!-- 操作列：仅保留总部财务的“编辑”功能 -->
|
|
<el-table-column fixed="right" label="操作" width="120px"
|
|
v-if="activeTab != 'reject'">
|
|
<template #default=scope>
|
|
<el-link
|
|
v-if="activeTab == 'pass' && !(scope.row.status == 6 || scope.row.status == 4)"
|
|
style="color: #2741DE;" @click="openEditForm(scope.row)">编辑
|
|
</el-link>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<!-- 分页组件 -->
|
|
<div class="pagination">
|
|
<el-pagination background :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize" :page-sizes="[5, 10, 20, 50, 100]"
|
|
layout="total, sizes, prev, pager, next, jumper" :total="total"
|
|
@size-change="handlePagination('size', $event)"
|
|
@current-change="handlePagination('page', $event)"></el-pagination>
|
|
</div>
|
|
</el-card>
|
|
</div>
|
|
|
|
<!-- 编辑填手续费弹窗 -->
|
|
<el-dialog class="editdialog" v-model="editFormisible" width="20vw" :before-close="closeEditForm">
|
|
<div class="content">
|
|
<div class="left">
|
|
<el-form class="editForm" label-width="4.5vw" label-position="left">
|
|
<el-form-item label="精网号">
|
|
<el-input disabled="true" v-model="editFormData.jwcode" placeholder="请输入驳回理由"/>
|
|
</el-form-item>
|
|
<el-form-item label="客户姓名">
|
|
<el-input disabled="true" v-model="editFormData.name" placeholder="请输入客户姓名"/>
|
|
</el-form-item>
|
|
<el-form-item label="所属地区">
|
|
<el-input disabled="true" v-model="editFormData.marketName" placeholder="请输入所属地区"/>
|
|
</el-form-item>
|
|
<el-form-item label="活动名称">
|
|
<el-input disabled="true" v-model="editFormData.activity" placeholder="请输入活动名称"/>
|
|
</el-form-item>
|
|
<el-form-item label="产品名称">
|
|
<el-select disabled="true" v-model="editFormData.goodsName" placeholder="请选择产品名称"
|
|
clearable></el-select>
|
|
</el-form-item>
|
|
<el-form-item v-show="!isEditGold" label="产品数量">
|
|
<div style="padding-right: 50px; display: flex;">
|
|
<el-input disabled="true" style="padding-right: 10px;" v-model="editFormData.goodNum"
|
|
placeholder="请输入产品数量"/>
|
|
<span style="color: #999999;">个</span>
|
|
</div>
|
|
</el-form-item>
|
|
<div v-show="isEditGold" style="margin-bottom: 15px; display: flex;">
|
|
<div style=" display: flex; ">
|
|
<span style="color: #999999; display: flex; white-space: nowrap;align-items: center;">永久金币：</span>
|
|
<el-input disabled="true"
|
|
style="padding-right: 10px; padding-left: 10px; height: 30px; width: 110px;"
|
|
v-model="editFormData.permanentGold"/>
|
|
</div>
|
|
<div style="padding-right: 5px; display: flex;">
|
|
<span style="color: #999999; display: flex; white-space: nowrap;align-items: center;">免费金币：</span>
|
|
<el-input disabled="true"
|
|
style="padding-right: 10px; padding-left: 10px; height: 30px; width: 110px;"
|
|
v-model="editFormData.freeGold"/>
|
|
</div>
|
|
</div>
|
|
<el-form-item label="付款币种">
|
|
<CurrencySelect :disabled="!ifOnline" v-model="editFormData.paymentCurrency"
|
|
:items="customOptions" placeholder="请选择付款币种"/>
|
|
</el-form-item>
|
|
<el-form-item label="付款金额">
|
|
<el-input :disabled="!ifOnline" v-model="editFormData.paymentAmount"
|
|
placeholder="请输入付款金额"/>
|
|
</el-form-item>
|
|
<el-form-item label="支付方式">
|
|
<el-select disabled="true" v-model="editFormData.payType" placeholder="请选择支付方式"
|
|
clearable></el-select>
|
|
</el-form-item>
|
|
<el-form-item label="到账地区">
|
|
<el-select disabled="true" v-model="editFormData.receivedMarket" placeholder="请选择到账地区"
|
|
clearable></el-select>
|
|
</el-form-item>
|
|
<el-form-item label="付款时间">
|
|
<el-date-picker disabled="true" type="datetime" v-model="editFormData.payTime"
|
|
placeholder="请选择付款时间"/>
|
|
</el-form-item>
|
|
<el-form-item label="转账凭证">
|
|
<div class="pic">
|
|
<el-upload disabled="true" ref="uploadRef" class="uploader" :show-file-list="false"
|
|
list-type="picture-card" :auto-upload="false" :before-upload="beforeUpload"
|
|
:on-error="handelImgErr" :on-change="handleImageChange"
|
|
:http-request="customUpload">
|
|
<img v-if="editFormData.voucher" :src="editFormData.voucher" class="avatar"
|
|
style="height: 100%; width: 100%; object-fit: cover;"/>
|
|
<el-icon v-else class="avatar-uploader-icon">
|
|
<Plus/>
|
|
</el-icon>
|
|
</el-upload>
|
|
<el-text class="picText">
|
|
仅支持.jpg .png格式文件≤ 1 MB
|
|
</el-text>
|
|
</div>
|
|
</el-form-item>
|
|
<el-form-item label="备注">
|
|
<el-input disabled="true" v-model="editFormData.remark" type="textarea" :rows="4"
|
|
placeholder="请输入驳回理由" maxlength="100" show-word-limit/>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
<div class="right">
|
|
<el-form ref="editFormRef" :rules="editFormRule" :model="editFormData" class="editFormRight"
|
|
label-width="4.5vw" label-position="left">
|
|
<el-form-item label="到账货币">
|
|
<CurrencySelect v-model="editFormData.receivedCurrency" :items="customOptions"
|
|
placeholder="请选择到账货币"/>
|
|
</el-form-item>
|
|
<el-form-item label="到账金额" prop="receivedAmount">
|
|
<el-input v-model="editFormData.receivedAmount" placeholder="请输入到账金额"/>
|
|
</el-form-item>
|
|
<el-form-item label="手续费" prop="handlingCharge">
|
|
<el-input v-model="editFormData.handlingCharge" placeholder="请输入手续费"/>
|
|
</el-form-item>
|
|
<el-form-item label="到账时间">
|
|
<el-date-picker type="datetime" v-model="editFormData.receivedTime" placeholder="请输入到账时间"/>
|
|
</el-form-item>
|
|
</el-form>
|
|
<span class="editBtns">
|
|
<button class="editBtn1" @click="closeEditForm">
|
|
<text class="txt">取消</text>
|
|
</button>
|
|
<button class="editBtn2" @click="throttledsubmitEditForm">
|
|
<text class="txt">提交</text>
|
|
</button>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</el-dialog>
|
|
|
|
<!-- 查看驳回理由弹窗 -->
|
|
<el-dialog v-model="showRejectReasonDialog" title="驳回理由" width="30vw" :before-close="closeRejectReasonDialog">
|
|
<el-form label-width="80px">
|
|
<el-form-item label="驳回原因">
|
|
<el-input type="textarea" v-model="rejectReasonContent" disabled :rows="5" placeholder="无驳回理由"/>
|
|
</el-form-item>
|
|
</el-form>
|
|
<template #footer>
|
|
<span class="dialog-footer">
|
|
<el-button @click="closeRejectReasonDialog">确认</el-button>
|
|
</span>
|
|
</template>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {ref, onMounted} from 'vue';
|
|
import {storeToRefs} from 'pinia';
|
|
import {ElMessage, ElMessageBox} from 'element-plus'
|
|
import API from '@/util/http.js'
|
|
import request from '@/util/http.js'
|
|
import moment from 'moment'
|
|
import {useAdminStore} from '@/store/index.js'
|
|
import {hasMenuPermission} from '@/utils/menuTreePermission.js'
|
|
import _ from 'lodash'
|
|
import {editFormRule} from './utils/recriveFormRules.js'
|
|
import {productList, MarketNameForId, CurrencyForId, marketList} from './utils/staticData.js'
|
|
import CurrencySelect from '@/components/MoneyManage/CurrencySelect.vue'
|
|
import {Plus} from '@element-plus/icons-vue';
|
|
|
|
// 状态管理
|
|
const adminStore = useAdminStore();
|
|
const {menuTree} = storeToRefs(adminStore);
|
|
const tableData = ref([])
|
|
const searchData = ref({})
|
|
const defaultTime = [new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)]
|
|
const getTime = ref([])
|
|
const activeTab = ref('pass')
|
|
const HQcaiwu = ref(true)
|
|
const superAdmin = ref(false)
|
|
const editFormData = ref({})
|
|
const ifOnline = ref(false)
|
|
const editFormisible = ref(false)
|
|
const editFormRef = ref(null)
|
|
const isEditGold = ref(false)
|
|
const showRejectReasonDialog = ref(false)
|
|
const rejectReasonContent = ref('')
|
|
const pageInfo = ref({pageSize: 10, pageNum: 1})
|
|
const total = ref(0)
|
|
const uploadRef = ref()
|
|
const customOptions = ref(['美元(USD)', '港币(HKD)', '新币(SGD)', '马币(MYR)', '泰铢(THB)', '加币(CAD)', '越南盾(VDN)', '韩元(KRW)'])
|
|
const paytypeList = ref(["Stripe-链接收款", "PaymentAsia-链接收款", "Ipay88-链接收款", "银行转账", "刷卡", "现金", "支票", "Grabpay", "Nets", "E-Transfer", "Paypal"])
|
|
const activityList = ref([])
|
|
const adminData = ref({})
|
|
|
|
// 核心方法
|
|
const search = () => {
|
|
getlist()
|
|
ElMessage.success('查询成功')
|
|
}
|
|
const reset = () => {
|
|
searchData.value = {}
|
|
getTime.value = []
|
|
pageInfo.value.pageNum = 1
|
|
getlist()
|
|
}
|
|
const getlist = async () => {
|
|
try {
|
|
let payCurrencySelect = ''
|
|
let goodsName = ''
|
|
if (getTime.value && getTime.value.length === 2) {
|
|
searchData.value.startTime = moment(getTime.value[0]).format('YYYY-MM-DD HH:mm:ss')
|
|
searchData.value.endTime = moment(getTime.value[1]).format('YYYY-MM-DD HH:mm:ss')
|
|
} else {
|
|
searchData.value.startTime = ''
|
|
searchData.value.endTime = ''
|
|
}
|
|
if (searchData.value.goodsName) {
|
|
goodsName = searchData.value.goodsName[searchData.value.goodsName.length - 1]
|
|
}
|
|
if (searchData.value.paymentCurrency) {
|
|
payCurrencySelect = CurrencyForId(searchData.value.paymentCurrency)
|
|
}
|
|
const cashRoleId = '2'
|
|
if (activeTab.value === 'pass') {
|
|
searchData.value.status = 13
|
|
} else if (activeTab.value === 'done') {
|
|
searchData.value.status = 46
|
|
}
|
|
const result = await request({
|
|
url: '/cashCollection/selectCollection',
|
|
data: {
|
|
...pageInfo.value,
|
|
cashCollection: {
|
|
...searchData.value,
|
|
submitterId: adminData.value.id,
|
|
receivedMarket: MarketNameForId(adminData.value.markets),
|
|
cashRoleId: cashRoleId,
|
|
paymentCurrency: payCurrencySelect,
|
|
submitterMarket: adminData.value.markets,
|
|
goodsName: goodsName,
|
|
market: MarketNameForId(searchData.value.market)
|
|
}
|
|
}
|
|
})
|
|
if (result.code === 200) {
|
|
tableData.value = result.data.list
|
|
total.value = result.data.total
|
|
} else {
|
|
ElMessage.error('数据异常')
|
|
}
|
|
} catch (error) {
|
|
console.log(error);
|
|
}
|
|
}
|
|
|
|
const navigateTo = async (tab) => {
|
|
if (tab === 'pass') {
|
|
activeTab.value = 'pass'
|
|
await getlist()
|
|
} else if (tab === 'done') {
|
|
activeTab.value = 'done'
|
|
await getlist()
|
|
}
|
|
}
|
|
|
|
const EditifGold = () => {
|
|
isEditGold.value = editFormData.value.goodsName === '金币充值'
|
|
}
|
|
const openEditForm = (row) => {
|
|
editFormData.value = {...row}
|
|
EditifGold()
|
|
ifOnline.value = row.status === 3
|
|
editFormisible.value = true
|
|
}
|
|
const closeEditForm = () => {
|
|
editFormisible.value = false
|
|
editFormData.value = {}
|
|
getlist()
|
|
}
|
|
const submitEditForm = async () => {
|
|
try {
|
|
await editFormRef.value.validate();
|
|
if (editFormData.value.receivedTime) {
|
|
editFormData.value.receivedTime = moment(editFormData.value.receivedTime).format('YYYY-MM-DD HH:mm:ss')
|
|
}
|
|
const result = await request({
|
|
url: '/cashCollection/complete',
|
|
data: {
|
|
orderCode: editFormData.value.orderCode,
|
|
handlingCharge: editFormData.value.handlingCharge * 100,
|
|
paymentCurrency: CurrencyForId(editFormData.value.paymentCurrency),
|
|
paymentAmount: editFormData.value.paymentAmount * 100,
|
|
receivedCurrency: CurrencyForId(editFormData.value.receivedCurrency),
|
|
receivedAmount: editFormData.value.receivedAmount * 100,
|
|
receivedTime: editFormData.value.receivedTime,
|
|
receivedRemark: editFormData.value.receivedRemark,
|
|
}
|
|
})
|
|
if (result.code === 200) {
|
|
ElMessage.success('提交成功')
|
|
getlist()
|
|
closeEditForm()
|
|
}
|
|
} catch (error) {
|
|
ElMessage.error('请检查表单数据格式');
|
|
}
|
|
}
|
|
|
|
const openRejectReason = (reason) => {
|
|
rejectReasonContent.value = reason || '无驳回理由'
|
|
showRejectReasonDialog.value = true
|
|
}
|
|
const closeRejectReasonDialog = () => {
|
|
showRejectReasonDialog.value = false
|
|
rejectReasonContent.value = ''
|
|
}
|
|
|
|
const previewImage = (imageUrl) => {
|
|
const imageElement = document.createElement('img');
|
|
imageElement.src = imageUrl;
|
|
imageElement.style.maxWidth = '80vw';
|
|
imageElement.style.maxHeight = '80vh';
|
|
const viewer = document.createElement('div');
|
|
viewer.style.position = 'fixed';
|
|
viewer.style.top = '0';
|
|
viewer.style.left = '0';
|
|
viewer.style.width = '100vw';
|
|
viewer.style.height = '100vh';
|
|
viewer.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
|
|
viewer.style.display = 'flex';
|
|
viewer.style.justifyContent = 'center';
|
|
viewer.style.alignItems = 'center';
|
|
viewer.style.zIndex = '9999';
|
|
viewer.style.overflow = 'auto';
|
|
viewer.appendChild(imageElement);
|
|
document.body.appendChild(viewer);
|
|
viewer.addEventListener('click', () => {
|
|
document.body.removeChild(viewer);
|
|
});
|
|
}
|
|
|
|
const handlePagination = (type, val) => {
|
|
if (type === 'size') {
|
|
pageInfo.value.pageSize = val
|
|
} else {
|
|
pageInfo.value.pageNum = val
|
|
}
|
|
getlist()
|
|
}
|
|
|
|
const beforeUpload = (rawFile) => {
|
|
if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png') {
|
|
ElMessage.error('图片必须是jpg或png类型!')
|
|
return false
|
|
} else if (rawFile.size / 1024 / 1024 > 2) {
|
|
ElMessage.error('图片大小不能超过 2MB!')
|
|
return false
|
|
}
|
|
return true
|
|
}
|
|
const handelImgErr = (err) => {
|
|
ElMessage.error("图片加载失败")
|
|
}
|
|
const handleImageChange = (file) => {
|
|
uploadRef.value.submit()
|
|
}
|
|
const customUpload = async (options) => {
|
|
try {
|
|
const formData = new FormData()
|
|
formData.append('file', options.file)
|
|
const response = await API({
|
|
url: 'https://api.homilychart.com/hljw/api/aws/upload',
|
|
method: 'POST',
|
|
data: formData,
|
|
headers: {
|
|
'Content-Type': 'multipart/form-data'
|
|
}
|
|
})
|
|
if (response.code === 200 && response.data) {
|
|
ElMessage.success('上传成功')
|
|
} else {
|
|
options.onError(response)
|
|
ElMessage.error(response.msg || '上传失败')
|
|
}
|
|
} catch (error) {
|
|
ElMessage.error(`上传失败: ${error.msg || error.message || '网络异常'}`)
|
|
}
|
|
}
|
|
|
|
const getAdminData = async function () {
|
|
try {
|
|
const result = await API({
|
|
url: '/admin/userinfo',
|
|
data: {}
|
|
})
|
|
adminData.value = result
|
|
} catch (error) {
|
|
console.log('管理员信息获取失败', error)
|
|
}
|
|
}
|
|
const getActivitys = async function () {
|
|
try {
|
|
const result = await API({
|
|
url: '/cashCollection/getActivityList',
|
|
data: {}
|
|
})
|
|
if (result.code === 200) {
|
|
activityList.value = result.data
|
|
} else {
|
|
ElMessage.error('活动列表获取失败')
|
|
}
|
|
} catch (error) {
|
|
console.log('活动列表请求失败', error)
|
|
}
|
|
}
|
|
|
|
const throttledsubmitEditForm = _.throttle(submitEditForm, 5000, {
|
|
trailing: false
|
|
})
|
|
|
|
onMounted(async function () {
|
|
await getAdminData()
|
|
await getActivitys()
|
|
if (adminData.value.roleId === 2) {
|
|
superAdmin.value = true
|
|
}
|
|
await getlist()
|
|
})
|
|
|
|
// 未使用方法占位
|
|
const handleSortChange = () => {}
|
|
const handleDatePickerChange = () => {}
|
|
const disabledDate = () => {}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.content {
|
|
height: 100%;
|
|
width: 80vw;
|
|
|
|
.card1 {
|
|
background: #F3FAFE;
|
|
width: 100%;
|
|
|
|
.row {
|
|
height: 4vh;
|
|
width: 80vw;
|
|
display: flex;
|
|
min-height: 40px;
|
|
|
|
.rowItem {
|
|
display: flex;
|
|
width: 15vw;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 0.5vw;
|
|
}
|
|
|
|
.buttons {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.div-card2 {
|
|
width: 100%;
|
|
margin-top: 2vh;
|
|
|
|
.card2 {
|
|
background: #E7F4FD;
|
|
}
|
|
|
|
.btns {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding-bottom: 10px;
|
|
|
|
.tabs {
|
|
min-width: 300px;
|
|
|
|
.btnItem {
|
|
margin-left: 10px;
|
|
border-radius: 5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.table {
|
|
margin: 10px;
|
|
border-radius: 20px;
|
|
|
|
.ellipsis-container {
|
|
position: relative;
|
|
width: 100%;
|
|
|
|
.ellipsis-text {
|
|
display: inline-block;
|
|
width: 100%;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.custom-tooltip {
|
|
position: fixed;
|
|
z-index: 9999;
|
|
padding: 8px 12px;
|
|
width: 200px;
|
|
background-color: #E4F0FC;
|
|
color: #333333;
|
|
border: 1px solid #e5e7eb;
|
|
border-radius: 4px;
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
|
min-height: 30px;
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
}
|
|
}
|
|
}
|
|
|
|
.pagination {
|
|
margin-top: 10px;
|
|
padding: 10px 10px;
|
|
}
|
|
}
|
|
|
|
:deep(.editdialog) {
|
|
min-width: 990px;
|
|
background-color: #F3FAFE !important;
|
|
margin-top: 8vh;
|
|
border-radius: 8px;
|
|
|
|
.content {
|
|
display: flex;
|
|
height: 100%;
|
|
width: 100%;
|
|
|
|
.left {
|
|
min-width: 500px;
|
|
}
|
|
|
|
.right {
|
|
flex: 1;
|
|
|
|
.editFormRight {
|
|
padding: 0 60px 0 40px;
|
|
|
|
.el-date-editor {
|
|
display: flex;
|
|
flex: 1;
|
|
}
|
|
}
|
|
|
|
.editBtns {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 60px;
|
|
|
|
.txt {
|
|
color: #f3fafe;
|
|
text-align: center;
|
|
font-family: "PingFang SC";
|
|
font-size: 14px;
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
line-height: 22px;
|
|
}
|
|
|
|
.editBtn1 {
|
|
min-width: 80px;
|
|
padding: 5px 12px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 4px;
|
|
border-radius: 4px;
|
|
background: #7E91FF;
|
|
border: none;
|
|
box-shadow: 0 0 4px 0 #00000040;
|
|
}
|
|
|
|
.editBtn2 {
|
|
display: flex;
|
|
width: 80px;
|
|
min-width: 80px;
|
|
padding: 5px 12px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 4px;
|
|
border-radius: 4px;
|
|
background: #2741DE;
|
|
border: none;
|
|
box-shadow: 0 0 4px 0 #00000040;
|
|
margin-left: 60px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.editForm {
|
|
padding: 0 60px 1vh 60px;
|
|
|
|
.el-date-editor {
|
|
display: flex;
|
|
flex: 1;
|
|
}
|
|
|
|
.pic {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.uploader {
|
|
height: 80px;
|
|
width: 80px;
|
|
|
|
.el-upload {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.picText {
|
|
color: #999999;
|
|
font-family: "PingFang SC";
|
|
font-size: 10px;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 20px;
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
:deep(.el-table__header-wrapper),
|
|
:deep(.el-table__body-wrapper),
|
|
:deep(.el-table__cell),
|
|
:deep(.el-table__body td) {
|
|
background-color: #F3FAFE !important;
|
|
}
|
|
|
|
:deep(.el-table__header th) {
|
|
background-color: #F3FAFE !important;
|
|
}
|
|
|
|
:deep(.el-table__row:hover > .el-table__cell) {
|
|
background-color: #E5EBFE !important;
|
|
}
|
|
|
|
.reject-reason-box {
|
|
--el-message-box-height: 500px;
|
|
}
|
|
|
|
.reject-reason-box .el-message-box__content {
|
|
max-height: 350px;
|
|
overflow-y: auto;
|
|
white-space: pre-wrap;
|
|
}
|
|
}
|
|
</style>
|