gold-vue/src/views/moneyManage/executor/executor.vue

<template>
    <el-card style="margin-bottom: 0.5vh;">
        <div class="condition1">
            <div class="condition-item">
                <el-text size="large" style="width:4vw;">姓名</el-text>
                <el-input v-model="searchForm.username" placeholder="请输入姓名" style="width:9vw;" clearable />
            </div>
            <div class="condition-item">
                <el-text size="large" style="width:4vw;">精网号</el-text>
                <el-input v-model="searchForm.jwcode" placeholder="请输入精网号" style="width:9vw;" clearable />
            </div>
            <div class="condition-item">
                <el-text size="large" style="width:4vw;">所属地区</el-text>
                <el-input v-model="searchForm.area" placeholder="请输入所属地区" style="width:9vw;" clearable />
            </div>
            <div class="condition-item">
                <el-text size="large" style="width:4vw;">产品名称</el-text>
                <el-input v-model="searchForm.productName" placeholder="请输入产品名称" style="width:9vw;" clearable />
            </div>
            <div class="condition-item">
                <el-text size="large" style="width:4vw;">退款币种</el-text>
                <el-select v-model="searchForm.payType" style="width:9vw;">
                    <el-option v-for="item in payments" :key="item" :label="item" :value="item" />
                </el-select>
            </div>
        </div>
        <div class="condition1">
            <div class="condition-item2">
                <el-text size="large" style="width:4vw;">退款途径</el-text>
                <el-select v-model="searchForm.auditStatus" style="width:9vw;">
                    <el-option v-for="item in auditStatusOptions" :key="item.value" :label="item.label"
                        :value="item.value" />
                </el-select>
            </div>
            <div class="condition-item2">
                <el-text size="large" style="width:4vw;">订单状态</el-text>
                <el-input v-model="searchForm.productName" placeholder="请输入订单状态" style="width:9vw;" clearable />
            </div>
            <div class="condition-item2" style="width: 28vw;">
                <el-text size="large" style="width:4vw;">付款时间</el-text>
                <el-date-picker v-model="dateRange" type="datetimerange" range-separator="至" start-placeholder="起始时间"
                    end-placeholder="结束时间" style="width:22vw;" @change="handleDatePickerChange"
                    :disabled-date="disabledDate" />
            </div>
            <div>
                <el-button type="success">重置</el-button>
                <el-button type="primary">查询</el-button>
                <el-button type="warning">导出excel</el-button>
                <el-button type="primary">查看导出列表</el-button>
            </div>
        </div>
    </el-card>
    <div style="height:4vh;">
        <el-button type="primary" @click="showEdit = true">新增</el-button>
    </div>
    <el-card>
        <el-table :data="tableData" style="height:60vh;width:82vw">
            <el-table-column type="index" label="序号" width="60" fixed="left" />
            <el-table-column prop="name" label="Homily ID" width="120" fixed="left" />
            <el-table-column prop="jwcode" label="姓名" width="120" fixed="left" show-overflow-tooltip />
            <el-table-column prop="market" label="所属地区" width="120" />
            <el-table-column prop="refundType" label="产品名称" width="120" />
            <el-table-column prop="refundType" label="退款类型" width="120" />
            <el-table-column prop="refundType" label="退款币种" width="120" />
            <el-table-column prop="refundType" label="退款金额" width="120" />
            <el-table-column prop="refundType" label="退款途径" width="120" />
            <el-table-column prop="refundType" label="退款截图" width="120" />
            <el-table-column prop="refundType" label="退款时间" width="120" />
            <el-table-column prop="adminName" label="订单状态" width="120" />
            <el-table-column prop="operation" label="操作" fixed="right" width="150px">
                <template #default="scope">
                    <div class="operation">
                        <el-popconfirm title="确定要通过此条记录吗？" @confirm="handleApprove(scope.row)">
                            <template #reference>
                                <el-button v-if="hasrefundWaitThough" :disabled="clicked || cancelClicked"
                                    type="primary" text>
                                    通过
                                </el-button>
                            </template>
                            <template #actions="{ confirm, cancel }">
                                <el-button size="small" @click="cancel">取消</el-button>
                                <el-button type="primary" size="small" :disabled="clicked" @click="confirm">
                                    确认
                                </el-button>
                            </template>
                        </el-popconfirm>
                        <el-button v-if="hasrefundWaitReject" :disabled="clicked || cancelClicked" type="primary" text
                            @click="showRejectDialog(scope.row)">
                            驳回
                        </el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination v-model:current-page="pagination.pageNum" v-model:page-size="pagination.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="pagination.total" style="margin-top: 1vh;"
            @size-change="handlePageSizeChange" @current-change="handleCurrentChange" />
    </el-card>

    <el-dialog v-model="showEdit" class="edit" overflow draggable style="width: 40vw;">
        <div style="display: flex;">
            <div class="left">
                <div class="dialog-item">
                    <el-text style="width:4vw;">精网号</el-text>
                    <el-input v-model="editForm.jwcode" placeholder="请输入精网号" style="width:10vw;" clearable />
                </div>
                <div class="dialog-item">
                    <el-text style="width:4vw;">客户姓名</el-text>
                    <el-input v-model="editForm.name" placeholder="请输入客户姓名" style="width:10vw;" clearable />
                </div>
                <div class="dialog-item">
                    <el-text style="width:4vw;">所属地区</el-text>
                    <el-input v-model="editForm.market" placeholder="请输入所属地区" style="width:10vw;" clearable />
                </div>
                <div class="dialog-item">
                    <el-text style="width:4vw;">产品名称</el-text>
                    <el-input v-model="editForm.orderCode" placeholder="请输入产品名称" style="width:10vw;" clearable />
                </div>
                <div class="dialog-item">
                    <el-text style="width:4vw;">退款类型</el-text>
                    <el-select v-model="editForm.refundType" placeholder="请选择退款类型" style="width:10vw;" clearable>
                        <el-option v-for="item in products" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </div>
                <div class="dialog-item">
                    <el-text style="width:4vw;">付款币种</el-text>
                    <el-select v-model="editForm.refundCurrency" placeholder="请选择付款币种" style="width:10vw;" clearable>
                        <el-option v-for="item in currencies" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </div>
                <div class="dialog-item">
                    <el-text style="width:4vw;">付款金额</el-text>
                    <el-input v-model="editForm.refundAmount" placeholder="请输入付款金额" style="width:10vw;" clearable />
                </div>
                <div class="dialog-item">
                    <el-text style="width:4vw;">支付方式</el-text>
                    <el-select v-model="editForm.paymentMethod" placeholder="请选择支付方式" style="width:10vw;">
                        <el-option v-for="item in payments" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </div>
                <div class="dialog-item">
                    <el-text style="width:4vw;">付款时间</el-text>
                    <el-date-picker v-model="editForm.payTime" type="datetime" placeholder="请选择付款时间" style="width:10vw;" clearable />
                </div>
                <div class="dialog-item">
                    <el-text style="width:4vw;">提交人</el-text>
                    <el-input v-model="editForm.submitter" placeholder="请输入提交人" style="width:10vw;" clearable />
                </div>
                <div class="dialog-item">
                    <el-text style="width:4vw;">转账凭证</el-text>
                    <el-form-item :rules="{ required: true, message: '请上传图片', trigger: 'change' }">
                        <el-upload ref="uploadRef" list-type="picture-card" :auto-upload="false"
                            :http-request="customUpload" :on-change="handleImageChange"
                            :on-success="handleUploadSuccess" :on-error="handleUploadError"
                            :before-upload="beforeUpload" :show-file-list="false">
                            <template #default>
                                <img v-if="editForm.imageUrl" :src="editForm.imageUrl"
                                    style="width: 100%; height: 100%; object-fit: cover;">
                                <el-icon v-else>
                                    <Plus />
                                </el-icon>
                            </template>
                        </el-upload>
                    </el-form-item>
                </div>
                <div class="dialog-item">
                    <el-text style="width:4vw;">备注</el-text>
                    <el-input v-model="editForm.remark" placeholder="请输入备注" style="width:10vw;" :row="3" 
                        maxlength="100" type="textarea" show-word-limit clearable />
                </div>
            </div>
            <div class="right">
                <div class="dialog-item">
                    <el-text style="width:4vw;">退款币种</el-text>
                    <el-select v-model="editForm.refundCurrency" placeholder="请选择退款币种" style="width:10vw;">
                        <el-option v-for="item in currencies" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </div>
                <div class="dialog-item">
                    <el-text style="width:4vw;">退款金额</el-text>
                    <el-input v-model="editForm.refundAmount" placeholder="请输入退款金额" style="width:10vw;" clearable />
                </div>
                <div class="dialog-item">
                    <el-text style="width:4vw;">退款途径</el-text>
                    <el-select v-model="editForm.refundWay" placeholder="请选择退款途径" style="width:10vw;">
                        <el-option v-for="item in refundWays" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </div>
                <div class="dialog-item">
                    <el-text style="width:4vw;">退款时间</el-text>
                    <el-date-picker v-model="editForm.refundTime" type="datetime" placeholder="请选择退款时间" style="width:10vw;" clearable />
                </div>
                <div class="dialog-item">
                    <el-text style="width:4vw;">备注</el-text>
                    <el-input v-model="editForm.remark" placeholder="请输入备注" style="width:10vw;" :rows="3"
                        maxlength="100" show-word-limit type="textarea" clearable />
                </div>
                <div style="display:flex;justify-content: center;margin-top: 5vh;">
                    <el-button type="default" @click="" style="margin-right: 2vw;">取消</el-button>
                    <el-button type="primary" @click="">提交</el-button>
                </div>
            </div>
        </div>
    </el-dialog>
</template>
<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import API from '@/util/http.js'

const tableData = ref([])
const pagination = ref({
    pageNum: 1,
    pageSize: 50,
    total: 0
})
const searchForm = ref({
    jwcode: ''
})
const showEdit = ref(false)
const editForm = ref({
    jwcode: ''
})
</script>
<style scoped>
.condition1 {
    width: 82vw;
    display: flex;
    align-items: center;
    height: 4vh;

    .condition-item {
        width: 18%;
        display: flex;
        align-items: center;
        margin-bottom: 1vh;
        margin-right: 0.5vw;
    }

    .condition-item2 {
        width: 18%;
        display: flex;
        align-items: center;
        margin-right: 0.5vw;
    }
}

.edit {
    .left {
        width: 45%;
        height: 60vh;
        padding: 0 2vw;

        .dialog-item {
            display: flex;
            align-items: center;
            margin-bottom: 1vh;
        }

        .image {
            width: 4vw !important;
            height: 4vw !important;
        }

        :deep(.el-upload--picture-card) {
            width: 4vw !important;
            height: 4vw !important;
            padding: 0 !important;
        }
    }

    .right {
        width: 50%;

        .dialog-item {
            display: flex;
            align-items: center;
            margin-bottom: 1vh;
        }
    }
}
</style>