9.30

src/views/moneyManage/receiveDetail/receiveDetail.vue

@@ -96,11 +96,13 @@
                         <el-table-column prop="market" label="所属地区" width="80px" />
                         <el-table-column prop="activity" label="活动名称" width="120px" />
                         <el-table-column prop="rateName" label="产品名称" width="120px" />
-                        <el-table-column prop="money" label="付款币种" width="100px">
+                        <el-table-column prop="rateNum" label="产品数量" width="120px" />
+                        <el-table-column prop="moneyType" label="付款币种" width="100px">
                         </el-table-column>
                         <el-table-column prop="permanentGold" label="付款金额" width="120px">
                         </el-table-column>
-                        <el-table-column prop="moneyType" label="到账币种" v-if="caiwu && activeTab == 'pass'" width="150px" ></el-table-column>
+                        <el-table-column prop="getMoneyType" label="到账币种" v-if="caiwu && activeTab == 'pass'"
+                            width="150px"></el-table-column>
                         <el-table-column prop="getMoney" label="到账金额" v-if="caiwu && activeTab == 'pass'" width="150px">
                             <template #default="scope">
                                 <div v-if="!scope.row.getMoney">
@@ -127,24 +129,51 @@
                                 </div>
                                 <div v-else
                                     style="display: flex; justify-content: center; align-items: center; height: 40px;">
-                                    --
+                                    ——
                                 </div>
                             </template>
                         </el-table-column>
-                        <el-table-column prop="bankOrder" label="银行流水订单号" v-if="caiwu && activeTab == 'pass'" width="150px" show-overflow-tooltip></el-table-column>
-                        <el-table-column prop="submiter" label="提交人" width="150px" show-overflow-tooltip></el-table-column>
-                        <el-table-column prop="auditor" label="审核人" v-if="caiwu && activeTab == 'pass'" width="150px" show-overflow-tooltip></el-table-column>
-                        <el-table-column prop="mask" label="备注" width="150px" show-overflow-tooltip></el-table-column>
-                        <el-table-column prop="getMoneyTime" label="到账时间" v-if="caiwu && activeTab == 'pass'" width="150px" show-overflow-tooltip>
+                        <el-table-column prop="bankOrder" label="银行流水订单号" v-if="caiwu && activeTab == 'pass'"
+                            width="150px" show-overflow-tooltip></el-table-column>
+                        <el-table-column prop="submiter" label="提交人" width="150px"
+                            show-overflow-tooltip></el-table-column>
+                        <el-table-column prop="auditor" label="审核人" v-if="caiwu && activeTab == 'pass' || 'reject'"
+                            width="150px" show-overflow-tooltip></el-table-column>
+                        <el-table-column prop="mask" label="备注" v-if="activeTab != 'reject'" width="150px"
+                            show-overflow-tooltip></el-table-column>
+                        <el-table-column prop="rejectTime" label="驳回时间" v-if="activeTab == 'reject' && !kefu"
+                            width="150px" show-overflow-tooltip></el-table-column>
+                        <el-table-column prop="rejectReason" label="驳回理由" v-if="activeTab == 'reject' && !kefu"
+                            width="150px">
+                            <template #default="scope">
+                                <div class="ellipsis-container"
+                                    @mouseenter="handleMouseEnter($event, scope.row.rejectReason)"
+                                    @mouseleave="handleMouseLeave" @mousemove="handleMouseMove($event)">
+                                    <span class="ellipsis-text">
+                                        {{ scope.row.rejectReason || '—' }}
+                                    </span>
+
+                                    <!-- 自定义提示框 -->
+                                    <div v-if="showTooltip && tooltipContent" class="custom-tooltip" :style="{
+                                        left: `${tooltipLeft}px`,
+                                        top: `${tooltipTop}px`
+                                    }">
+                                        {{ tooltipContent }}
+                                    </div>
+                                </div>
+                            </template>
+                        </el-table-column>
+                        <el-table-column prop="getMoneyTime" label="到账时间" v-if="caiwu && activeTab == 'pass'"
+                            width="150px">
                         </el-table-column>
                         <el-table-column v-if="kefu" fixed="right" prop="orderStatus" label="订单状态" width="100px" />
                         <el-table-column fixed="right" label="操作" width="100px" v-if="activeTab != 'reject'">
                             <template #default=scope>
                                 <span v-if="kefu && scope.row.orderStatus == '已通过'" style="color: #FA5A1E;">退款</span>
-                                <span v-else-if="kefu && scope.row.orderStatus == '已撤回'"
-                                    style="color: #2741DE;">编辑</span>
-                                <span v-else-if="kefu && scope.row.orderStatus == '待审核'"
-                                    style="color: #FA5A1E;">撤回</span>
+                                <span v-else-if="kefu && scope.row.orderStatus == '已撤回'" style="color: #2741DE;"
+                                    @click="openAddForm(scope.row)">编辑</span>
+                                <span v-else-if="kefu && scope.row.orderStatus == '待审核'" style="color: #FA5A1E;"
+                                    @click="openRecall">撤回</span>
                                 <span v-else-if="activeTab == 'wait' && !kefu" style="color: #2741DE;"
                                     @click="openAuditForm">审核</span>
                                 <span v-else-if="activeTab == 'pass' && !kefu" style="color: #2741DE;"
@@ -161,10 +190,15 @@
                 </div>
             </el-card>
         </div>
+        <div class="recallDialog">
+            <div class="close">
+                
+            </div>
+        </div>
         <el-dialog class="adddialog" v-model="addFormisible" width="20vw" :before-close="closeAddForm">
             <el-form class="addForm" label-width="4vw" label-position="left">
                 <el-form-item label="精网号" required>
-                    <el-input v-model="addFormData.jwcode" placeholder="请输入驳回理由" />
+                    <el-input v-model="addFormData.jwcode" placeholder="请输入精网号" />
                 </el-form-item>
                 <el-form-item label="客户姓名" required>
                     <el-input v-model="addFormData.userName" placeholder="请输入客户姓名" />
@@ -176,10 +210,19 @@
                     <el-input v-model="addFormData.jwcode" placeholder="请输入活动名称" />
                 </el-form-item>
                 <el-form-item label="产品名称" required>
-                    <el-select placeholder="请选择产品名称" clearable></el-select>
+                    <el-select placeholder="请选择产品名称" v-model="addFormData.rateName" clearable>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="产品数量" required>
+                    <div style="padding-right: 50px; display: flex;">
+                        <el-input style="padding-right: 10px;" v-model="addFormData.rateNum" placeholder="请输入产品数量" />
+                        <span style="color: #999999;">个</span>
+                    </div>
                 </el-form-item>
                 <el-form-item label="付款币种" required>
-                    <el-select placeholder="请选择付款币种" clearable></el-select>
+                    <el-select placeholder="请选择付款币种" v-model="addFormData.moneyType" clearable>
+                        <el-option v-for="item in payModel" :key="item.value" :label="item.label" :value="item.value" />
+                    </el-select>
                 </el-form-item>
                 <el-form-item label="付款金额" required>
                     <el-input v-model="addFormData.jwcode" placeholder="请输入付款金额" />
@@ -188,9 +231,11 @@
                     <el-select placeholder="请选择支付方式" clearable></el-select>
                 </el-form-item>
                 <el-form-item label="付款时间" required>
-                    <el-time-picker v-model="addFormData.time" placeholder="请选择付款时间" />
+                    <el-date-picker type="datetime" placement="right" v-model="addFormData.time"
+                        placeholder="请选择付款时间" />
                 </el-form-item>
                 <el-form-item label="转账凭证" required>
+                    <div class="pic">
                         <el-upload 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">
@@ -200,6 +245,7 @@
                                 <Plus />
                             </el-icon>
                         </el-upload>
+                    </div>
                 </el-form-item>
                 <el-form-item label="备注" required>
                     <el-input v-model="addFormData.mask" type="textarea" :rows="4" placeholder="请输入备注" maxlength="100"
@@ -233,7 +279,9 @@
                     <el-select placeholder="请选择产品名称" clearable></el-select>
                 </el-form-item>
                 <el-form-item label="付款币种">
-                    <el-select placeholder="请选择付款币种" clearable></el-select>
+                    <el-select placeholder="请选择付款币种" v-model="auditFormData.moneyType" clearable>
+                        <el-option v-for="item in payModel" :key="item.value" :label="item.label" :value="item.value" />
+                    </el-select>
                 </el-form-item>
                 <el-form-item label="付款金额">
                     <el-input v-model="auditFormData.jwcode" placeholder="请输入付款金额" />
@@ -242,7 +290,7 @@
                     <el-select placeholder="请选择支付方式" clearable></el-select>
                 </el-form-item>
                 <el-form-item label="付款时间">
-                    <el-time-picker v-model="auditFormData.time" placeholder="请选择付款时间" />
+                    <el-date-picker type="datetime" v-model="auditFormData.time" placeholder="请选择付款时间" />
                 </el-form-item>
                 <el-form-item label="转账凭证">
                     <div class="pic">
@@ -306,7 +354,10 @@
                             <el-select placeholder="请选择产品名称" clearable></el-select>
                         </el-form-item>
                         <el-form-item label="付款币种">
-                            <el-select placeholder="请选择付款币种" clearable></el-select>
+                            <el-select placeholder="请选择付款币种" clearable>
+                                <el-option v-for="item in payModel" :key="item.value" :label="item.label"
+                                    :value="item.value" />
+                            </el-select>
                         </el-form-item>
                         <el-form-item label="付款金额">
                             <el-input v-model="editFormData.jwcode" placeholder="请输入付款金额" />
@@ -315,7 +366,7 @@
                             <el-select placeholder="请选择支付方式" clearable></el-select>
                         </el-form-item>
                         <el-form-item label="付款时间">
-                            <el-time-picker v-model="editFormData.time" placeholder="请选择付款时间" />
+                            <el-date-picker type="datetime" v-model="editFormData.time" placeholder="请选择付款时间" />
                         </el-form-item>
                         <el-form-item label="转账凭证">
                             <div class="pic">
@@ -359,12 +410,12 @@
                         </el-form-item>
                     </el-form>
                     <span class="editBtns">
-                        <button class="editBtn1">
+                        <button class="editBtn1" @click="closeEditForm">
                             <text class="txt">
                                 取消
                             </text>
                         </button>
-                        <button class="editBtn2">
+                        <button class="editBtn2" @click="submitEditForm">
                             <text class="txt">
                                 提交
                             </text>
@@ -414,14 +465,26 @@ const addFormisible = ref(false)
 
 
 const uploadRef = ref()
-const openAddForm = () => {
+const openAddForm = (row) => {
+    if (row) {
+        addFormData.value = row
+    }
     addFormisible.value = true
 }
 const closeAddForm = () => {
     addFormisible.value = false
     addFormData.value = {}
 }
+//撤回弹窗
 
+const recallDialog = ref(false)
+const openRecall = () => {
+    recallDialog.value = true
+}
+const closeRecall = () => {
+    recallDialog.value = false
+}
+//图片上传
 const handleImgSuccess = (response, uploadFile) => {
     try {
         console.log('11', response)
@@ -492,6 +555,10 @@ const closeEditForm = () => {
     editFormisible.value = false
     editFormData.value = {}
 }
+//提交编辑
+const submitEditForm = () => {
+
+}
 //==================  审核相关     =========================
 const auditFormData = ref({
 
@@ -536,128 +603,192 @@ const pageInfo = ref({
     pageSize: 10,
     pageNum: 1
 })
-
-
 const total = ref(0)
+
+// ============   已驳回相关      ===========================
+// 提示框状态管理
+const showTooltip = ref(false);
+const tooltipContent = ref('');
+const tooltipLeft = ref(0);
+const tooltipTop = ref(0);
+const tooltipWidth = 200;
+// 鼠标进入时显示提示框
+const handleMouseEnter = (e, content) => {
+    if (content) {
+        showTooltip.value = true;
+        tooltipContent.value = content;
+        handleMouseMove(e);
+    }
+};
+
+// 鼠标离开时隐藏提示框
+const handleMouseLeave = () => {
+    showTooltip.value = false;
+    tooltipContent.value = '';
+};
+
+// 鼠标移动时更新提示框位置（显示在鼠标左侧）
+const handleMouseMove = (e) => {
+    // 左侧显示：鼠标X坐标 - 提示框宽度 - 偏移量
+    tooltipLeft.value = e.clientX - tooltipWidth - 10;
+    // Y坐标与鼠标保持一致（垂直居中对齐）
+    tooltipTop.value = e.clientY - 10;
+};
 const tableData = [
     {
-    "jwcode": "HM2024001",
+        "jwcode": "HM20240601",
         "name": "张三",
         "market": "华东区",
-    "activity": "2024春季促销活动",
+        "activity": "2024年中促销",
         "rateName": "年度会员套餐A",
-    "money": "人民币",
-    "permanentGold": 2980.00,
         "moneyType": "人民币",
+        "permanentGold": 2980.00,
+        "getMoneyType": "人民币",
         "getMoney": 2980.00,
         "shouxufei": 59.60,
         "pastType": "支付宝转账",
-    "remark": "2024-05-10 09:23",
-    "voucher": "https://example.com/voucher/1.jpg",
-    "payModel": "https://example.com/icon/alipay.png",
-    "bankOrder": "ALIPAY2024051000001",
+        "remark": "2024-06-01 09:30",
+        "voucher": "https://mock-img.com/voucher/2024060101.jpg",
+        "payModel": "https://mock-img.com/icon/alipay.png",
+        "bankOrder": "ALIPAY202406010001",
         "submiter": "李四（运营部）",
         "auditor": "王五（财务部）",
-    "mask": "客户主动购买，无特殊备注",
-    "getMoneyTime": "2024-05-10 10:05",
-    "orderStatus": "已通过"
+        "mask": "客户主动购买，无特殊需求",
+        "rejectTime": null,
+        "rejectReason": null,
+        "getMoneyTime": "2024-06-01 10:15",
+        "orderStatus": "已撤回"
     },
     {
-    "jwcode": "HM2024002",
+        "jwcode": "HM20240602",
         "name": "李四",
         "market": "华北区",
         "activity": "新客首单优惠",
         "rateName": "季度体验套餐B",
-    "money": "美元",
+        "moneyType": "美元",
         "permanentGold": 99.00,
-    "moneyType": "人民币",
-    "getMoney": 712.00,
-    "shouxufei": 14.24,
+        "getMoneyType": "人民币",
+        "getMoney": 712.50,
+        "shouxufei": 14.25,
         "pastType": "PayPal",
-    "remark": "2024-05-11 14:56",
-    "voucher": "https://example.com/voucher/2.jpg",
-    "payModel": "https://example.com/icon/paypal.png",
-    "bankOrder": "PAYPAL2024051100002",
+        "remark": "2024-06-02 14:15",
+        "voucher": "https://mock-img.com/voucher/2024060201.jpg",
+        "payModel": "https://mock-img.com/icon/paypal.png",
+        "bankOrder": "PAYPAL202406020001",
         "submiter": "赵六（国际部）",
         "auditor": "孙七（财务部）",
         "mask": "跨境支付，汇率按当日中间价计算",
-    "getMoneyTime": "2024-05-12 08:30",
-    "orderStatus": "待审核"
+        "rejectTime": null,
+        "rejectReason": null,
+        "getMoneyTime": "2024-06-02 16:40",
+        "orderStatus": "已通过"
     },
     {
-    "jwcode": "HM2024003",
+        "jwcode": "HM20240603",
         "name": "王五",
         "market": "华南区",
         "activity": "老客召回活动",
         "rateName": "月度续费套餐C",
-    "money": "人民币",
-    "permanentGold": 399.00,
         "moneyType": "人民币",
+        "permanentGold": 399.00,
+        "getMoneyType": null,
         "getMoney": null,
         "shouxufei": null,
         "pastType": "微信支付",
-    "remark": "2024-05-12 11:18",
-    "voucher": "https://example.com/voucher/3.jpg",
-    "payModel": "https://example.com/icon/wechat.png",
-    "bankOrder": "WECHAT2024051200003",
+        "remark": "2024-06-03 11:20",
+        "voucher": "https://mock-img.com/voucher/2024060301.jpg",
+        "payModel": "https://mock-img.com/icon/wechat.png",
+        "bankOrder": null,
         "submiter": "钱八（客服部）",
         "auditor": null,
-    "mask": "到账信息待财务补充",
+        "mask": "待财务补充到账信息",
+        "rejectTime": null,
+        "rejectReason": null,
         "getMoneyTime": null,
-    "orderStatus": "已撤回"
+        "orderStatus": "待审核"
     },
     {
-    "jwcode": "HM2024004",
+        "jwcode": "HM20240604",
         "name": "赵六",
         "market": "西区",
         "activity": "企业团购活动",
         "rateName": "企业定制套餐D",
-    "money": "人民币",
-    "permanentGold": 15800.00,
         "moneyType": "人民币",
-    "getMoney": 15800.00,
-    "shouxufei": 316.00,
+        "permanentGold": 15800.00,
+        "getMoneyType": null,
+        "getMoney": null,
+        "shouxufei": null,
         "pastType": "银行对公转账",
-    "remark": "2024-05-13 09:45",
-    "voucher": "https://example.com/voucher/4.jpg",
-    "payModel": "https://example.com/icon/bank.png",
-    "bankOrder": "BANK2024051300004",
+        "remark": "2024-06-04 09:05",
+        "voucher": null,
+        "payModel": null,
+        "bankOrder": null,
         "submiter": "周九（销售部）",
         "auditor": "吴十（财务部）",
-    "mask": "10人企业团单，享受95折优惠",
-    "getMoneyTime": "2024-05-13 11:20",
-    "orderStatus": "已通过"
+        "mask": null,
+        "rejectTime": "2024-06-04 10:30",
+        "rejectReason": "未上传转账凭证，需补充后重新提交",
+        "getMoneyTime": null,
+        "orderStatus": "已驳回"
     },
     {
-    "jwcode": "HM2024005",
+        "jwcode": "HM20240605",
         "name": "孙七",
         "market": "东北区",
         "activity": "节日特惠活动",
         "rateName": "年度会员套餐A",
-    "money": "人民币",
-    "permanentGold": 2780.00,
         "moneyType": "人民币",
+        "permanentGold": 2780.00,
+        "getMoneyType": "人民币",
         "getMoney": 2780.00,
         "shouxufei": 55.60,
         "pastType": "银联支付",
-    "remark": "2024-05-14 15:30",
-    "voucher": null,
-    "payModel": null,
-    "bankOrder": "UNIONPAY2024051400005",
+        "remark": "2024-06-05 15:40",
+        "voucher": "https://mock-img.com/voucher/2024060501.jpg",
+        "payModel": "https://mock-img.com/icon/unionpay.png",
+        "bankOrder": "UNION202406050001",
         "submiter": "郑一（市场部）",
         "auditor": "王二（财务部）",
-    "mask": "凭证暂未上传，已提醒客户补充",
-    "getMoneyTime": "2024-05-14 16:45",
-    "orderStatus": "待审核"
+        "mask": "客户使用节日优惠券，已核减200元",
+        "rejectTime": null,
+        "rejectReason": null,
+        "getMoneyTime": "2024-06-05 16:25",
+        "orderStatus": "已通过"
+    },
+    {
+        "jwcode": "HM20240606",
+        "name": "周八",
+        "market": "华北区",
+        "activity": "新客首单优惠",
+        "rateName": "季度体验套餐B",
+        "moneyType": "人民币",
+        "permanentGold": 359.00,
+        "getMoneyType": null,
+        "getMoney": null,
+        "shouxufei": null,
+        "pastType": "微信支付",
+        "remark": "2024-06-06 13:10",
+        "voucher": "https://mock-img.com/voucher/2024060601.jpg",
+        "payModel": "https://mock-img.com/icon/wechat.png",
+        "bankOrder": null,
+        "submiter": "吴九（客服部）",
+        "auditor": "郑十（财务部）",
+        "mask": null,
+        "rejectTime": "2024-06-06 14:00",
+        "rejectReason": "付款金额与订单金额不符（订单359元，实付349元）",
+        "getMoneyTime": null,
+        "orderStatus": "已驳回"
     }
 ]
 </script>
 <style scoped lang="scss">
-.content {  //整体内容
+.content {
+    //整体内容
     height: 100%;
     width: 83vw;
 
-    .card1 {   // 筛选框
+    .card1 {
+        // 筛选框
         width: 100%;
 
         .row {
@@ -684,12 +815,14 @@ const tableData = [
     }
 
 
-    .card2 {  // 下方数据展示card
+    .card2 {
+        // 下方数据展示card
         width: 100%;
 
         margin-top: 2vh;
 
-        .btns {  //切换标签
+        .btns {
+            //切换标签
             display: flex;
             align-items: center;
             justify-content: space-between;
@@ -706,7 +839,7 @@ const tableData = [
 
             .btnAdd {
                 margin-right: 5vw;
-                padding-left: 10px;
+                padding-left: 50px;
             }
         }
 
@@ -715,6 +848,41 @@ const tableData = [
         .table {
             margin: 10px 3vw;
             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 {
@@ -723,7 +891,20 @@ const tableData = [
         }
     }
 
-    :deep(.adddialog) {  //客服新增弹窗
+    .recallDialog {
+        //撤回弹窗提示
+        height: 392px;
+        width: 700px;
+        background-image: url('/src/assets/收款明细撤回背景.png');
+        position: fixed; // 固定定位，相对于浏览器窗口
+        top: 50%; // 距离顶部50%
+        left: 50%; // 距离左侧50%
+        transform: translate(-50%, -50%); // 向左、向上平移自身宽高的50%，实现居中
+        z-index: 1000; // 确保在其他元素上层显示
+    }
+
+    :deep(.adddialog) {
+        //客服新增弹窗
         min-width: 500px;
         background-color: #F3FAFE !important;
         margin-top: 8vh;
@@ -773,7 +954,8 @@ const tableData = [
         }
     }
 
-    :deep(.editdialog) {  //编辑弹窗
+    :deep(.editdialog) {
+        //编辑弹窗
         min-width: 990px;
         background-color: #F3FAFE !important;
         margin-top: 8vh;
@@ -815,7 +997,8 @@ const tableData = [
 
         }
 
-        .content {  //编辑弹窗内容
+        .content {
+            //编辑弹窗内容
             display: flex;
             height: 100%;
             width: 100%;
@@ -910,7 +1093,8 @@ const tableData = [
 
     }
 
-    :deep(.adddialog .el-form-item__label) {  //设置新增弹窗表头
+    :deep(.adddialog .el-form-item__label) {
+        //设置新增弹窗表头
         min-width: 80px;
         width: auto;
         font-weight: 800;