gold-vue/src/views/moneyManage/financialAccount/cashFlow.vue

<script setup>
import { ref, reactive, onMounted, nextTick, toRaw } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import request from '@/util/http.js'
import dayjs from 'dayjs'
import { useI18n } from 'vue-i18n'
import { Moneyfunds, refundOnline, exportFunds } from '@/api/cash/financialAccount.js'
import { useAdminStore } from '@/store/index.js'
import { storeToRefs } from 'pinia'
import _ from 'lodash';
import { normalizePayType,MarketNameForId, CurrencyForId, } from '@/views/moneyManage/receiveDetail/utils/staticData.js'
import { isTemplate } from 'element-plus/es/utils/index.mjs'
import { Row } from 'vxe-pc-ui'
import CashManagement from '@/components/workspace/CashManagement.vue'
import { permissionMapping, hasMenuPermission } from "@/utils/menuTreePermission.js"

const adminStore = useAdminStore()
const { adminData, menuTree,flag } = storeToRefs(adminStore)

const { t } = useI18n()
const route = useRoute()

const paytypeList = [
  t('cash.payMethods.stripe'),      // Stripe
  t('cash.payMethods.paymentAsia'), // PaymentAsia
  t('cash.payMethods.stripe2'),    // Stripe2
  t('cash.payMethods.ipay88'),      // Ipay88
  t('cash.payMethods.grabpay'),     // Grabpay
  t('cash.payMethods.nets'),        // Nets
  t('cash.payMethods.transfer'),    // E-Transfer
  t('cash.payMethods.iotPay'),      // IOT Pay
  t('cash.payMethods.stripe3'),     // Stripe3
  t('cash.payMethods.paypal'),      // PayPal
  t('cash.payMethods.paysolution'), // Paysolution
  t('cash.payMethods.bankTransfer'),// 银行转账
  t('cash.payMethods.card'),        // 刷卡
  t('cash.payMethods.cash'),        // 现金
  t('cash.payMethods.check'),        // 支票 
]

// 新增流水权限
const hasNewTransactionFlow = ref(false)

// 初始化权限状态
const initPermissions = async () => {
  if (!menuTree.value || !menuTree.value.length) return;
  // 新增流水权限
  hasNewTransactionFlow.value = hasMenuPermission(menuTree.value, permissionMapping.new_transaction_flow);
};

const payPlatformOptions = ref([...paytypeList])

const marketFilter = (value) => {
  const map = { 
    4: t('cash.markets.Singapore'), 
    5: t('cash.markets.Malaysia'), 
    13:t('cash.markets.HongKong'),
    24016: t('cash.markets.Canada'),
    24018:t('cash.markets.Thailand'),
    24022:t('cash.markets.VietnamHCM'),
    24033:t('cash.markets.Beijing'),
  };
  return map[value] || '-';
};

// 地区树
const marketOptions = ref([])

// 查询参数
const queryParams = reactive({
  jwcode: '',
  markets: [], // 下拉多选
  performanceMarkets:[],
  timeRange: [], // [startTime, endTime]
  payType: '',
  orderCode: '',
  pageNum: 1,
  pageSize: 20,
  platformSelection: []
})

const total = ref(0)
const tableData = ref([])
const tableRef = ref(null)
const scrollTableTop = () => {
  tableRef.value?.setScrollTop?.(0)
}
const loading = ref(false)

// 转换树形结构（参考 coinConsumeDetail.vue）
const transformTree = (nodes) => {
  const allChildren = nodes.flatMap(node => node.children || []);
  return allChildren.map(child => {
    const grandchildren = child.children && child.children.length
      ? transformTree([child])
      : null;
    return {
      value: child.id,
      label: child.name,
      children: grandchildren
    };
  });
};

// 获取地区数据
const getMarket = async () => {
  try {
    const result = await request({ url: '/market/selectMarket' });
    if (result && result.data) {
      marketOptions.value = transformTree(result.data)
    }
  } catch (error) {
    console.error('获取地区失败', error)
  }
}

const formatStatuses = (statuses) => {
  // 情况1：非数组/空值 → 返回空数组
  if (!Array.isArray(statuses)) {
    return [];
  }
  // 情况2：数组中包含 null 或 undefined → 返回空数组
  if (statuses.some(item => item === null || item === undefined)) {
    return [];
  }
  // 情况3：正常数组 → 返回原数组
  return statuses;
};
const performanceMarket = ref([
    t('cash.markets.Malaysia'),   // 马来西亚
    t('cash.markets.HongKong'),   // 香港
    t('cash.markets.Singapore'),  // 新加坡
    t('cash.markets.Thailand'),   // 泰国
    t('cash.markets.VietnamHCM'), // 越南HCM
    t('cash.markets.Canada'),      // 加拿大
    t('cash.markets.Beijing')      // 北京
])
const getPayPlatformOptions = async () => {
  try {
    const res = await request({
      url: '/market/getAreaPayTypeTree', 
      method: 'POST' 
    })
    if (res.code === 200) {
      payPlatformOptionsList.value = res.data
      console.log('支付平台数据加载成功:', payPlatformOptionsList.value)
    } else {
      ElMessage.error(res.msg || t('elmessage.getDataFailed'))
    }
  } catch (error) {
    console.error('请求支付平台数据出错:', error)
    ElMessage.error(t('elmessage.networkError'))
  }
}
// 查询列表
const fetchData = async () => {
  loading.value = true
  try {
    //转换areaPayTypeList参数结构
    const areaPayTypeList = [];
    const options = toRaw(payPlatformOptionsList.value);
    const selectedPaths = queryParams.platformSelection; 
    if (selectedPaths.length > 0 && options.length > 0) {
      selectedPaths.forEach(path => {
        const areaId = path[0];
        const payMethodId = path[path.length - 1]; 
        if (path.length === 1) {
           const countryNode = options.find(c => c.id === areaId);
           if (countryNode && countryNode.children) {
             countryNode.children.forEach(child => {
               areaPayTypeList.push({
                 areaId: areaId,
                 payType: child.name 
               });
             });
           }
        } 
        else {
           const countryNode = options.find(c => c.id === areaId);
           if (countryNode && countryNode.children) {
             const methodNode = countryNode.children.find(m => m.id === payMethodId);
             if (methodNode) {
               areaPayTypeList.push({
                 areaId: areaId,
                 payType: methodNode.name
               });
             }
           }
        }
      });
    }
    //转换performanceMarket参数结构
    let performanceMarkets = [];
    const selectedNames = queryParams.performanceMarket;
    if (Array.isArray(selectedNames) && selectedNames.length > 0) {
      performanceMarkets = selectedNames
        .map(name => {
          if (!name) return null;
          const id = MarketNameForId(name); 
          return id; 
        })
        .filter(id => id !== null && id !== 'null'); // 过滤无效值
    }
    const params = {
      pageNum: queryParams.pageNum,
      pageSize: queryParams.pageSize,
      fundsDTO: {
        jwcode: queryParams.jwcode,
        localMarket: queryParams.markets,
        performanceMarkets:performanceMarkets,  
        areaPayTypeList: areaPayTypeList,
        startTime: queryParams.timeRange?.[0] ? dayjs(queryParams.timeRange[0]).format('YYYY-MM-DD HH:mm:ss') : '',
        endTime: queryParams.timeRange?.[1] ? dayjs(queryParams.timeRange[1]).format('YYYY-MM-DD HH:mm:ss') : '',
        payType: normalizePayType(queryParams.payType || ''),
        orderCode: queryParams.orderCode,
        markets: [],
      }
    }
    console.log('查询参数:', params)
    const res = await Moneyfunds(params)
    if (res.code == 200) {
      tableData.value = res.data.list || []
      await nextTick()
      scrollTableTop()
      total.value = res.data.total || 0
      loading.value = false
    } else {
      ElMessage.error(res.msg || t('elmessage.getDataFailed'))
      loading.value = false
    }
  } catch (error) {
    console.error(error)
    loading.value = false
    ElMessage.error(t('elmessage.getDataFailed'))
  }
}

const handleSearch = () => {
  queryParams.pageNum = 1
  fetchData()
}

const handleReset = () => {
  queryParams.jwcode = ''
  queryParams.performanceMarket = ''
  queryParams.timeRange = null
  queryParams.payType = ''
  queryParams.orderCode = ''
  queryParams.platformSelection=[]
  handleSearch()
}

const handlePageSizeChange = (val) => {
  queryParams.pageSize = val
  fetchData()
}

const handleCurrentChange = (val) => {
  queryParams.pageNum = val
  fetchData()
}

// 退款操作
const openRefundConfirm = () => {
  showDetail.value=false
  textContent.value = t('common.willRefundOrder') + '?'
  refundConfirmDialog.value = true
  refundFormData.value = {
    ...formDataRow.value,
    oldpermanentGold: formDataRow.value.permanentGold || formDataRow.value.gold || 0,//退款永久金币
    oldfreeGold: formDataRow.value.freeGold || formDataRow.value.free || 0,//退款免费金币
    permanentGold: null,
    freeGold: null,
  }
}
const openRefundDialog = () => {
  refundDialog.value = true
  closeConfirmRefund()
}

const closeConfirmRefund = () => {
  refundConfirmDialog.value = false
  textContent.value = ''
}
const refundConfirmDialog = ref(false)
const textContent = ref('')
const refundDialog = ref(false)
const refundFormData = ref({})
const resetRefund = () => {
  refundFormData.value.refundModel = ''
  refundFormData.value.refundReason = ''
  refundFormData.value.permanentGold = null
  refundFormData.value.freeGold = null

}
const handleRefund = async () => {
  try {
    if(refundFormData.value.status == 6){
      ElMessage.error(t('elmessage.refundagain'))
        return
    }
    if (refundFormData.value.refundModel == 1) {
      if (Number(refundFormData.value.permanentGold || 0) > Number(refundFormData.value.oldpermanentGold || 0)) {
        ElMessage.error(t('elmessage.limitRefundGoldNotExceedOriginal'))
        return
      }
      if (Number(refundFormData.value.freeGold || 0) > Number(refundFormData.value.oldfreeGold || 0)) {
        ElMessage.error(t('elmessage.limitRefundGoldNotExceedOriginal'))
        return
      }
    }
    if (refundFormData.value.refundModel == 0) {
      refundFormData.value.permanentGold = refundFormData.value.oldpermanentGold
      refundFormData.value.freeGold = refundFormData.value.oldfreeGold
    }
    let params = {
      jwcode: refundFormData.value.jwcode,
      name: refundFormData.value.name,
      market: refundFormData.value.marketName,
      submitterMarket: adminData.value.markets,
      remark: refundFormData.value.remark,
      originalOrderId: refundFormData.value.id,
      refundReason: refundFormData.value.refundReason,
      refundModel: refundFormData.value.refundModel,
      orderCode: refundFormData.value.orderCode,
      submitterId: adminData.value.id,
      permanentGold: (refundFormData.value.permanentGold) * 100 || 0,
      handlingCharge: refundFormData.value.handlingCharge == null ? null : refundFormData.value.handlingCharge * 100,
      freeGold: (refundFormData.value.freeGold) * 100 || 0,
      partRefundGold: (refundFormData.value.permanentGold * 100 || 0),
      partRefundFree: (refundFormData.value.freeGold * 100 || 0),
      payType: refundFormData.value.payType,
    }
    console.log('这是退款参数：', params);

    const res = await refundOnline(params)
    if (res.code == 200) {
      ElMessage.success(t('elmessage.submitSuccess'))
      refundDialog.value = false
      fetchData()
    } else {
      ElMessage.error(res.msg || t('refund.refundFailed'))
    }
  } catch (error) {
    console.error(error)
  }
}

const payPlatformOptionsList = ref([])



// ==================== 导出相关逻辑 ====================

const exportListVisible = ref(false)
const exportList = ref([])
const exportListLoading = ref(false)

// 导出Excel
const handleExport = async () => {

  const formatStatuses = (statuses) => {
    // 情况1：非数组/空值 → 返回空数组
    if (!Array.isArray(statuses)) {
      return [];
    }
    // 情况2：数组中包含 null 或 undefined → 返回空数组
    if (statuses.some(item => item === null || item === undefined)) {
      return [];
    }
    // 情况3：正常数组 → 返回原数组
    return statuses;
  };
  try {
    const params = {
      pageNum: queryParams.pageNum,
      pageSize: queryParams.pageSize,
      fundsDTO: {
        jwcode: queryParams.jwcode,
        localMarket: queryParams.markets,
        startTime: queryParams.timeRange?.[0] ? dayjs(queryParams.timeRange[0]).format('YYYY-MM-DD HH:mm:ss') : '',
        endTime: queryParams.timeRange?.[1] ? dayjs(queryParams.timeRange[1]).format('YYYY-MM-DD HH:mm:ss') : '',
        payType: normalizePayType(queryParams.payType || ''),
        orderCode: queryParams.orderCode,
        statuses: formatStatuses(queryParams.statuses),
        markets: [],
      }
    }
    // TODO: 确认导出接口 URL
    const res = await exportFunds(params)
    if (res.code == 200) {

      console.log('导出参数', params)
      ElMessage.success(t('elmessage.exportSuccess'))
    }

  } catch (error) {
    console.error(error)
    ElMessage.error(t('elmessage.exportError'))
  }
}

// 打开导出列表弹窗
const openExportList = () => {
  getExportList()
  exportListVisible.value = true
}

// 获取导出列表
const getExportList = async () => {
  exportListLoading.value = true
  try {
    const result = await request({ url: '/export/export' })
    if (result.code === 200) {
      const filteredData = result.data.filter(item => item.type == 15);
      exportList.value = filteredData || []
    } else {
      ElMessage.error(result.msg || t('elmessage.getExportListError'))
    }
  } catch (error) {
    console.error('获取导出列表出错:', error)
    ElMessage.error(t('elmessage.getExportListError'))
  } finally {
    exportListLoading.value = false
  }
}

// 下载导出文件
const downloadExportFile = (item) => {
  if (item.state === 2) {
    const link = document.createElement('a')
    link.href = item.url
    link.download = item.fileName
    link.click()
  } else {
    ElMessage.warning(t('elmessage.exportingInProgress'))
  }
}

// 根据状态返回对应的标签类型
const getTagType = (state) => {
  switch (state) {
    case 0: return 'info';
    case 1: return 'primary';
    case 2: return 'success';
    case 3: return 'danger';
    default: return 'info';
  }
}

// 根据状态返回对应的标签文案
const getTagText = (state) => {
  switch (state) {
    case 0: return t('elmessage.pendingExecution');
    case 1: return t('elmessage.executing');
    case 2: return t('elmessage.executed');
    case 3: return t('elmessage.errorExecution');
    default: return t('elmessage.unknownStatus');
  }
}
const throttledsubmitRefund = _.throttle(handleRefund, 5000, {
  trailing: false
})
// 递归查找地区ID
// normalizeMarketLabel 标准化地区名称，用于对比匹配
const normalizeMarketLabel = (value) => {
  return String(value ?? '')
    .trim()
    .toLowerCase()
    .replace(/[\s_-]+/g, '')
}
// 传入的这两个参数对比，是否有匹配的地区ID
const findValueByLabel = (options, label) => {
  // option和label都调用normalizeMarketLabel函数
  const normalizedLabel = normalizeMarketLabel(label)
  for (const option of options) {
    if (normalizeMarketLabel(option.label) === normalizedLabel) {
      return option.value
    }
    if (option.children && option.children.length) {
      const found = findValueByLabel(option.children, label)
      if (found) return found
    }
  }
  return null
}

//记录详情表单
const formDataRow = ref({
  jwcode:'',
  marketName:'',
  goodsName:'',
  paymentCurrencyName:'',
  paymentAmount:'',
  payTime:'',
  voucher:'',
  name:'',
  activity:'',
  payType:'',
  receivedCurrencyName:'',
  receivedAmount:'',
  receivedTime:'',
  handlingCharge:'',
  remark:'',
});
//记录点击函数
const showDetail=ref(false)
const showRecordDetail = async (row) => {
  showDetail.value=true
  formDataRow.value={
    ...row,
    handlingCharge:row.handlingCharge || 0
  }
}
const paymentCurrency = ref([
    t('cash.currency.usd'),   // 美元(USD)
    t('cash.currency.hkd'),   // 港币(HKD)
    t('cash.currency.sgd'),   // 新币(SGD)
    t('cash.currency.myr'),   // 马币(MYR)
    t('cash.currency.thb'),   // 泰铢(THB)
    t('cash.currency.cad'),   // 加币(CAD)
    t('cash.currency.vnd'),   // 越南盾(VND)
    t('cash.currency.krw'),    // 韩元(KRW)
    t('cash.currency.rmb'),    // 人民币(CNY)
])

//新增流水
const showAddDetail=ref(false)
const type = ref('other')
const addCashFlow=(s)=>{
  showAddDetail.value=true
  type.value=s
}
const selectAddType= (s) => {
  otherFormRef.value?.resetFields?.();
  ipay88FormRef.value?.resetFields?.();
  type.value=s
}
const otherFormRef = ref(null); 
const addOtherForm=ref({
 performanceMarket:"",        //业绩归属地
 goodsName:"",                //收入类别
 goodNum:"",                  //个数
 payType:"",                  //支付方式
 paymentCurrency:"",          //付款币种
 paymentAmount:"",            //付款金额
 payTime:"",                  //支付时间
 handlingCharge:"",            //手续费
 remark:"",                   //备注 
 isPerformance:'',  
 submitterId: adminData.value?.id || '', // 直接初始化为用户ID
 submitterMarket: adminData.value?.markets || [] // 直接初始化为用户地区（通常是数组）
})
const otherRules = {
  performanceMarket: [
  { required: true, message: t('common.performanceByRegionPlaceholder'), trigger: 'change' }
    ],
    goodsName: [
      { required: true, message: t('cash.cashFlow.incomeCategoryPlaceholder'), trigger: 'change' }
    ],
    goodNum: [
      { type: 'number', message: t('cash.cashFlow.quantityMustBeNumber'), trigger: 'blur' }
    ],
    payType: [
      { required: true, message: t('elmessage.checkPayModel'), trigger: 'change' }
    ],
    paymentCurrency: [
      { required: true, message: t('common.payCurrencyPlaceholder'), trigger: 'change' }
    ],
      paymentAmount: [
      { required: true, message: t('common_add.payAmountPlaceholder'), trigger: 'blur' },
      { pattern: /^-?[0-9]+(\.[0-9]{1,2})?$/, message: t('cash.cashFlow.invalidFormat'), trigger: 'blur' }
    ],
      payTime: [
      { required: true, message: t('common_add.payTimePlaceholder'), trigger: 'change' }
    ],
      handlingCharge: [
      { pattern: /^[0-9]+(\.[0-9]{1,2})?$/, message: t('cash.cashFlow.invalidFormat'), trigger: 'blur' }
    ]
  };
const handleOther=async ()=>{
  if (!otherFormRef.value) return;
    try {
      await otherFormRef.value.validate();
      if(addOtherForm.value.goodsName=== t('cash.cashFlow.localIntercompany') || 
      addOtherForm.value.goodsName=== t('cash.cashFlow.corporateIntercompany') || 
      addOtherForm.value.goodsName=== t('cash.cashFlow.otherIncomeNon') ){
        addOtherForm.value.isPerformance='0'
      }else{
        addOtherForm.value.isPerformance='1'
      }
      const submitData={
        performanceMarket:String(MarketNameForId(addOtherForm.value.performanceMarket)),        
        goodsName:addOtherForm.value.goodsName,                
        goodNum:String(addOtherForm.value.goodNum),                  
        payType:addOtherForm.value.payType,                  
        paymentCurrency:String(CurrencyForId(addOtherForm.value.paymentCurrency)),        
        paymentAmount:addOtherForm.value.paymentAmount*100,            
        payTime:addOtherForm.value.payTime,                  
        handlingCharge:addOtherForm.value.handlingCharge*100,            
        remark:addOtherForm.value.remark,  
        isPerformance:addOtherForm.value.isPerformance,
        submitterId: addOtherForm.value.submitterId,
        submitterMarket: addOtherForm.value.submitterMarket, 
      }
      const handle =await request({
        url:'/cashCollection/addExFund',
        data:submitData
      })
      console.log('提交的数据:', submitData);
      if (handle.code == 200 || handle.status == 200) { 
        ElMessage.success(t('elmessage.submitSuccess'));
        otherFormRef.value?.resetFields?.();
        showAddDetail.value = false;
      }
    } catch (error) {
      console.log('校验失败', error);
  }
};
const ipay88FormRef = ref(null); 
const addIpay88Form=ref({
 performanceMarket:"",        //业绩归属地
 payType:"",                  //支付方式
 paymentCurrency:"",          //付款币种
 handlingCharge:"",            //手续费
 remark:"",                   //备注 
 submitterId: adminData.value?.id || '', // 直接初始化为用户ID
 submitterMarket: adminData.value?.markets || [] // 直接初始化为用户地区（通常是数组）
})
const ipay88Rules = {
  performanceMarket: [{ required: true, message: t('common.performanceByRegionPlaceholder'), trigger: 'change' } ],
  goodsName: [{ required: true, message: t('cash.cashFlow.incomeCategoryPlaceholder'), trigger: 'change' }],
  payType: [ { required: true, message: t('common.payModelPlaceholder'), trigger: 'change' } ],
  paymentCurrency: [{ required: true, message: t('common.payCurrencyPlaceholder'), trigger: 'change' }],
  payTime: [{ required: true, message: t('common_add.payTimePlaceholder'), trigger: 'change' }],
  handlingCharge: [
    { required: true, message: t("common_add.feePlaceholder"),trigger: 'change'},
    { pattern: /^[0-9]+(\.[0-9]{1,2})?$/, message: t('cash.cashFlow.invalidFormat'),trigger: 'change' } ],
  remark: [ {required: true, max: 100, message: t('cash.cashFlow.remarksexceed'), trigger: 'change' }]
  };
const handleIpay88 =async () =>{
  if (!ipay88FormRef.value) return;
  try {
    await ipay88FormRef.value.validate();
    const Data={
      performanceMarket:String(MarketNameForId(addIpay88Form.value.performanceMarket)),        
      payType:addIpay88Form.value.payType,   
      paymentCurrency:String(CurrencyForId(addIpay88Form.value.paymentCurrency)),        
      handlingCharge:addIpay88Form.value.handlingCharge*100,
      remark:addIpay88Form.value.remark,
      submitterId: addIpay88Form.value.submitterId,
      submitterMarket: addIpay88Form.value.submitterMarket, 
    }
    const handle =await request({
      url:'/cashCollection/addiPay88Fee',
      data:Data
    })
    console.log('提交的数据:', Data);
    if (handle.code == 200 || handle.status == 200) { 
      ElMessage.success(t('elmessage.submitSuccess'));
      ipay88FormRef.value?.resetFields?.();
      showAddDetail.value = false;
    }
  } catch (error) {
    console.log('校验失败', error);
  }
}
// 修改 handleCancel 方法
const handleCancel = () => {
  otherFormRef.value?.resetFields?.();
  ipay88FormRef.value?.resetFields?.();
  showAddDetail.value = false;
};
const previewVisible=ref(false)
const handlePreviewClick=()=>{
  if(previewVisible.value){
    previewVisible.value=false
  }
}
onMounted(async () => {
  await initPermissions()
  await getMarket()
  await getPayPlatformOptions() 
  // 处理从工作台跳转过来的地区参数
  // 如果出现URL中的?region=a&region=b 这种重复key，router会解析为['a','b'], 取第一个地区ID
  const regionName = Array.isArray(route.query.region) ? route.query.region[0] : route.query.region
  if (regionName && marketOptions.value.length) {
    const matchedId = findValueByLabel(marketOptions.value, regionName)
    if (matchedId) {
      // el-cascader 绑定的 markets 是数组
      queryParams.markets = [matchedId]
    }
  }

  fetchData()
})
</script>

<template>
  <div class="cash-flow-container">
    <!-- 搜索区域 -->
    <el-card class="search-card">
      <div class="search-bar">
        <!-- 第一行 -->
        <div class="search-row">
          <div class="search-item">
            <span class="label">{{ t('common.jwcode') }}：</span>
            <el-input v-model="queryParams.jwcode" :placeholder="t('common.jwcodePlaceholder')" clearable />
          </div>
          <div class="search-item">
            <span class="label">{{ t('cash.cashFlow.performanceMarket') }}</span>
            <el-select v-model="queryParams.performanceMarket" 
            :placeholder="t('cash.cashFlow.performanceMarketPlaceholder')" 
            clearable :multiple="true"
            style="width: 220px;"
            :prop="performanceMarket"
            collapse-tags >
              <el-option v-for="item in performanceMarket" :key="item" :label="item" :value="item" />
            </el-select>
            <!-- <span class="label">{{ t('common.performanceByRegion') }}：</span> -->
            <!-- 下拉多选，使用 el-cascader 匹配地区树结构 -->
            <!-- <el-cascader v-model="queryParams.markets" :options="marketOptions"
              :props="{ multiple: true, emitPath: false }" collapse-tags collapse-tags-tooltip
              :placeholder="t('common.performanceByRegionPlaceholder')" clearable style="width: 240px;" /> -->
          </div>

          <!-- 选择平台二级表单 -->
          <div class="search-item">
            <span class="label">{{ t('common.payPlatform1') }}：</span>
            <el-cascader v-model="queryParams.platformSelection" :options="payPlatformOptionsList" 
              :props="{ multiple: true ,value:'id',label:'name'}"
              collapse-tags collapse-tags-tooltip :placeholder="t('common.payPlatformPlaceholder1')" clearable 
              style="width: 220px;" 
              />
          </div>
          <div class="search-item">
            <span class="label">{{ t('common.orderNo') }}：</span>
            <el-input v-model="queryParams.orderCode" :placeholder="t('common.orderNoPlaceholder')" clearable />
          </div>
          <div class="search-item" style="width: auto;">
            <span class="label">{{ t('common.payTime2') }}：</span>
            <el-date-picker v-model="queryParams.timeRange" type="datetimerange" :range-separator="t('common.to')"
              :start-placeholder="t('common.startTime')" :end-placeholder="t('common.endTime')"
              :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]" style="width: 350px;" />
          </div>
          <div class="search-btn-group">
            <el-button type="primary" @click="handleSearch">{{ t('common.search') }}</el-button>
            <el-button type="primary" @click="handleExport">{{ t('common.exportExcel') }}</el-button>
            <el-button type="primary" @click="openExportList">{{ t('common.viewExportList') }}</el-button>
            <el-button type="success" @click="handleReset">{{ t('common.reset') }}</el-button>
          </div>
          <div class="newAdd">
            <el-button v-if="hasNewTransactionFlow" class="newAdd_btn" @click="addCashFlow('other')">{{ t('common.addCashFlow') }}</el-button>
          </div>
        </div>
      </div>
    </el-card>
    <!-- 表格区域 -->
    <el-card class="table-card" >
      <el-table ref="tableRef" :data="tableData" v-loading="loading" style="width: 100%; flex: 1;"
        :cell-style="{ textAlign: 'center' }"
        :header-cell-style="{ background: '#F3FAFE', color: '#333', textAlign: 'center' }"
        @row-click="showRecordDetail" >
        <el-table-column type="index" :label="t('common_list.id')" width="60" align="center" fixed="left">
          <template #default="scope">
            <span>{{ scope.$index + 1 + (queryParams.pageNum - 1) * queryParams.pageSize }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="payTime" :label="t('common_list.payTime2')" width="180" align="center" />
        <el-table-column prop="orderCode" :label="t('common_list.orderCode')" width="280" show-overflow-tooltip />
        <el-table-column prop="receivedMarket" :label="t('common_list.receiveArea')" width="280" show-overflow-tooltip >
          <template #default="{ row }">
              {{ marketFilter(row.receivedMarket) }}
          </template>
          </el-table-column>
        <el-table-column prop="performanceMarket" :label="t('common_list.performanceMarket')" width="120" show-overflow-tooltip >
          <template #default="{ row }">
              {{ marketFilter(row.performanceMarket) }}
          </template></el-table-column>
        <el-table-column prop="name" :label="t('common_list.name')" width="150" show-overflow-tooltip />
        <el-table-column prop="jwcode" :label="t('common_list.jwcode')" width="120"  />
        <el-table-column prop="goodsName" :label="t('common_list.receiveType')" width="120"  >
          <template #default="{ row }">{{ row.goodsName || '-' }}</template>
        </el-table-column>
        <el-table-column prop="remark" :label="t('common_list.remark')" width="120"  />
        <el-table-column prop="goodNum" :label="t('common_list.nums')" width="120"  />
        <el-table-column prop="payType" :label="t('common_list.paymentMethod')" width="120"  />
        <el-table-column prop="receivedCurrencyName" :label="t('common_list.receiveCurrency')" width="120"
          show-overflow-tooltip />
        <el-table-column prop="paymentAmount" :label="t('common_list.payAmount')" width="150" align="right">
        </el-table-column>
        <el-table-column prop="handlingCharge" :label="t('common_list.fee')" width="100" align="right" >
          <template #default="{ row }">{{ row.handlingCharge || 0 }}</template>
        </el-table-column>
        <el-table-column prop="receivedAmount" :label="t('common_list.receiveAmount')" width="150" align="right">
        </el-table-column>
        <!-- <el-table-column :label="t('common_list.operation')" width="100" fixed="right" align="center">
          <template #default="{ row }">
            <el-button v-if="row.orderCode.slice(0, 4) == 'GOLD' && row.status === 4" type="danger" link size="small"
              @click="openRefundConfirm(row)">
              {{ t('common_list.refund') }}
            </el-button>
          </template>
        </el-table-column> -->
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination background layout="total, sizes, prev, pager, next, jumper" :total="total"
          :current-page="queryParams.pageNum" :page-size="queryParams.pageSize" :page-sizes="[10, 20, 50, 100]"
          @size-change="handlePageSizeChange" @current-change="handleCurrentChange" />
      </div>
    </el-card>

    <!-- 详情显示页 -->
    <el-dialog class="detailDialog" v-model="showDetail" :title="t('common_add.originalOrderInfo')" width="700px" destroy-on-close>
      <el-form :model="formDataRow" label-width="100px" class="detail-form" disabled>
        <div style="display: flex;">
          <div class="left">
            <div class="add-item">
              <el-form-item :label="t('common_list.jwcode')">
              <el-input v-model="formDataRow.jwcode" />
              </el-form-item>
            </div>
            <div class="add-item">
          <el-form-item :label="t('common_list.market')">
            <el-input v-model="formDataRow.marketName" />
          </el-form-item>
        </div>
            <div class="add-item">
          <el-form-item :label="t('common_list.productName')">
            <el-input v-model="formDataRow.goodsName" />
          </el-form-item>
        </div>
            <div class="add-item">
          <el-form-item :label="t('common_list.payCurrency')">
            <el-input v-model="formDataRow.paymentCurrencyName" />
          </el-form-item>
        </div>
            <div class="add-item">
          <el-form-item :label="t('common_list.payAmount')">
            <el-input v-model="formDataRow.paymentAmount" />
          </el-form-item>
        </div>
            <div class="add-item">
          <el-form-item :label="t('common_list.payTime2')">
            <el-input v-model="formDataRow.payTime" />
          </el-form-item>
        </div>
          <div class="add-item">
          <el-form-item :label="t('common_list.transferVoucher')">
          <div v-if="formDataRow.voucher" class="voucher-container">
          <el-image :src="formDataRow.voucher" :preview-src-list="[formDataRow.voucher]" 
          fit="cover" class="voucher-img" v-model:preview-visible="previewVisible"
          @click="handlePreviewClick"/>
          </div>
          <div v-else class="no-voucher">{{ t('common_list.noTransferVoucher') }}</div>
          </el-form-item>
        </div>
          </div>
          <div class="right">
            <div class="add-item">
          <el-form-item :label="t('common_list.customerName')">
            <el-input v-model="formDataRow.name" />
          </el-form-item>
          </div>
          <div class="add-item">
          <el-form-item :label="t('common_list.activity')">
            <el-input v-model="formDataRow.activityName" />
          </el-form-item>
          </div>
          <div class="add-item">
          <el-form-item :label="t('common_list.payModel')">
            <el-input v-model="formDataRow.payType" />
          </el-form-item>
          </div>
          <div class="add-item">
          <el-form-item :label="t('common_add.receiveCurrency')">
            <el-input v-model="formDataRow.receivedCurrencyName" />
          </el-form-item>
          </div>
          <div class="add-item">
          <el-form-item :label="t('common_list.receiveAmount')">
            <el-input v-model="formDataRow.receivedAmount" />
          </el-form-item>
          </div>
          <div class="add-item">
          <el-form-item :label="t('common_list.receiveTime')">
            <el-input v-model="formDataRow.receivedTime" />
          </el-form-item>
          </div>
          <div class="add-item">
          <el-form-item :label="t('common_list.fee')">
            <el-input v-model="formDataRow.handlingCharge" />
          </el-form-item>
        </div>
          <div class="add-item">
          <el-form-item :label="t('common_list.submitter')">
            <el-input v-model="adminData.adminName" />
          </el-form-item>
          </div>
          <div class="add-item">
          <el-form-item :label="t('common_list.remark')">
            <el-input v-model="formDataRow.remark" type="textarea" :rows="2" />
          </el-form-item>
          </div>
        </div>
        </div>
      </el-form>
      <div style="display:flex;justify-content: center;margin-top: 5vh;" class="btnDiv">
        <el-button type="default" style="background-color: #7E91FF;" @click="showDetail = false">{{t('common.cancel')}}</el-button>
        <el-button v-show="formDataRow.orderCode.slice(0, 4) == 'GOLD' && formDataRow.status === 4 " type="primary" style="background-color: #2741DE; margin-left: 2.5vw;" @click="openRefundConfirm">{{ t('common.refund') }}</el-button>
      </div>
    </el-dialog>

    <!-- 新增流水页面 -->
    <el-dialog class="adddialog" v-model="showAddDetail" style="width: 400px;">
      <div style="width: fit-content; height: fit-content;margin-bottom: 20px; ">
        <el-button 
        class="btnItem"
        :style="{backgroundColor: type === 'other' ? '#2741DE' : '#E5EBFE', color: type === 'other' ? 'white' : '#666' }" 
        @click="selectAddType('other')" >{{ t('cash.cashFlow.otherIncome') }}</el-button>
        <el-button 
        class="btnItem"
        :style="{ backgroundColor: type === 'ipay88' ? '#2741DE' : '#E5EBFE', color: type === 'ipay88' ? 'white' : '#666' }" 
        @click="selectAddType('ipay88')" >{{ t('cash.cashFlow.addFee') }}</el-button>
      </div>
      <!-- 其他收入填写表单 -->
      <div v-if="type === 'other'" >
        <el-form :model="addOtherForm" :rules="otherRules" ref="otherFormRef" label-width="120px" label-position="left">
          <el-form-item :label=" t('cash.cashFlow.performanceMarket')" prop="performanceMarket">
            <el-select v-model="addOtherForm.performanceMarket" :placeholder="t('cash.cashFlow.performanceMarketPlaceholder')" >
              <el-option v-for="item in performanceMarket" :key="item" :label="item" :value="item" />
            </el-select>
          </el-form-item>
          <el-form-item :label="t('cash.cashFlow.incomeCategory')" prop="goodsName">
            <el-select v-model="addOtherForm.goodsName" :placeholder="t('cash.cashFlow.incomeCategoryPlaceholder')" >
              <el-option :value="t('cash.cashFlow.investmentIncome')" />
              <el-option :value="t('cash.cashFlow.taxRefund')" />
              <el-option :value="t('cash.cashFlow.governmentSubsidy')" />
              <el-option :value="t('cash.cashFlow.localIntercompany')" />
              <el-option :value="t('cash.cashFlow.corporateIntercompany')" />
              <el-option :value="t('cash.cashFlow.otherIncomeNon')" />
              <el-option :value="t('cash.cashFlow.otherIncomeYes')" />
            </el-select>
          </el-form-item>
          <el-form-item :label="t('cash.cashFlow.quantity')" prop="goodNum">
            <el-input v-model.number="addOtherForm.goodNum" :placeholder="t('cash.cashFlow.quantityPlaceholder')" />
          </el-form-item>
          <el-form-item :label="t('cash.cashFlow.payType')" prop="payType">
            <el-select v-model="addOtherForm.payType" :placeholder="t('cash.cashFlow.payTypePlaceholder')" >
              <el-option v-for="item in paytypeList" :key="item" :value="item" :label="item"/>
            </el-select>
          </el-form-item>
          <el-form-item :label="t('cash.cashFlow.paymentCurrency')" prop="paymentCurrency">
            <el-select v-model="addOtherForm.paymentCurrency" :placeholder="t('cash.cashFlow.paymentCurrencyPlaceholder')" >
              <el-option v-for="item in paymentCurrency" :key="item" :label="item" :value="item"/>
            </el-select>
          </el-form-item>
          <el-form-item :label="t('cash.cashFlow.paymentAmount')" prop="paymentAmount">
            <el-input v-model="addOtherForm.paymentAmount" :placeholder="t('cash.cashFlow.paymentAmountPlaceholder')" />
          </el-form-item>
          <el-form-item :label="t('cash.cashFlow.paymentTime')" prop="payTime">
            <el-date-picker v-model="addOtherForm.payTime" type="datetime" :placeholder="t('cash.cashFlow.paymentTimePlaceholder')"  value-format="YYYY-MM-DD HH:mm:ss"/>
          </el-form-item>
          <el-form-item :label="t('cash.cashFlow.bankHandlingFee')" prop="handlingCharge">
            <el-input v-model="addOtherForm.handlingCharge" :placeholder="t('cash.cashFlow.bankHandlingFeePlaceholder')" />
          </el-form-item>
          <el-form-item :label="t('cash.cashFlow.remarks')" prop="remark">
            <el-input v-model="addOtherForm.remark" type="textarea" :rows="3" :placeholder="t('cash.cashFlow.remarksPlaceholder')" :maxlength="100" show-word-limit />
          </el-form-item>
        </el-form>
        <div class="btnDiv" >
        <el-button type="default" style="background-color: #7E91FF;" @click="handleCancel">{{t('cash.cashFlow.cancel')}}</el-button>
        <el-button type="primary" style="background-color: #2741DE; margin-left: 2.5vw;" @click="handleOther">{{t('cash.cashFlow.submit')}}</el-button>
        </div>
      </div> 
      <!-- ipay88手续费填写表单 -->
      <div v-if="type === 'ipay88'" >
        <el-form :model="addIpay88Form" :rules="ipay88Rules" ref="ipay88FormRef"  label-width="120px" label-position="left">
          <el-form-item :label="t('cash.cashFlow.payType')" prop="payType">
            <el-select v-model="addIpay88Form.payType" :placeholder="t('cash.cashFlow.payTypePlaceholder')" >
              <el-option :value="t('cash.cashFlow.ipay88')" :label="t('cash.cashFlow.ipay88')"/>
              <el-option :value="t('cash.cashFlow.cardPayment')" :label="t('cash.cashFlow.cardPayment')"/>
            </el-select>
          </el-form-item>
          <el-form-item :label="t('cash.cashFlow.performanceMarket')" prop="performanceMarket">
            <el-select v-model="addIpay88Form.performanceMarket" :placeholder="t('cash.cashFlow.performanceMarketPlaceholder')" >
              <el-option v-for="item in performanceMarket" :key="item" :label="item" :value="item" />
            </el-select>
          </el-form-item>
          <el-form-item :label="t('cash.cashFlow.incomeCategory')">
            <el-input disabled :value="t('cash.cashFlow.fixedProcessingFee')"></el-input>
          </el-form-item>
          <el-form-item :label="t('cash.cashFlow.settlementRegion')">
            <el-input disabled :value="t('cash.cashFlow.Malaysia')"></el-input>
          </el-form-item>
          <el-form-item :label="t('cash.cashFlow.paymentCurrency')" prop="paymentCurrency">
            <el-select v-model="addIpay88Form.paymentCurrency" :placeholder="t('cash.cashFlow.paymentCurrencyPlaceholder')">
              <el-option v-for="item in paymentCurrency" :key="item" :label="item" :value="item"/>
            </el-select>
          </el-form-item>
          <el-form-item :label="t('cash.cashFlow.paymentAmount')" prop="paymentAmount">
            <el-input disabled v-model="addIpay88Form.paymentAmount" :placeholder="t('cash.cashFlow.paymentAmountPlaceholder')" value="0"/>
          </el-form-item>
          <el-form-item :label="t('cash.cashFlow.processingFee')" prop="handlingCharge">
            <el-input v-model="addIpay88Form.handlingCharge" :placeholder="t('cash.cashFlow.processingFeePlaceholder')" />
          </el-form-item>
          <el-form-item :label="t('cash.cashFlow.remarks')" prop="remark">
            <el-input v-model="addIpay88Form.remark" type="textarea" :rows="3" :placeholder="t('cash.cashFlow.remarkPlaceholderDate')" :maxlength="100" show-word-limit/>
          </el-form-item>
        </el-form>
        <div class="btnDiv">
        <el-button type="default" style="background-color: #7E91FF;" @click="handleCancel">{{t('cash.cashFlow.cancel')}}</el-button>
        <el-button type="primary" style="background-color: #2741DE; margin-left: 2.5vw;" @click="handleIpay88">{{t('cash.cashFlow.submit')}}</el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 导出列表弹窗 -->
    <el-dialog v-model="exportListVisible" :title="t('common_export.exportList')" width="80%">
      <el-table :data="exportList" style="width: 100% ;height: 60vh;" :loading="exportListLoading">
        <el-table-column prop="fileName" :label="t('common_export.fileName')" />
        <el-table-column prop="state" :label="t('common_export.status')">
          <template #default="scope">
            <el-tag :type="getTagType(scope.row.state)" :effect="scope.row.state === 3 ? 'light' : 'plain'">
              {{ getTagText(scope.row.state) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" :label="t('common_export.createTime')">
          <template #default="scope">
            {{ dayjs(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') }}
          </template>
        </el-table-column>
        <el-table-column :label="t('common_export.operation')">
          <template #default="scope">
            <el-button type="primary" size="small" @click="downloadExportFile(scope.row)"
              :disabled="scope.row.state !== 2">
              {{ t('common_export.download') }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <div class="dialog-footer">
          <el-button text @click="exportListVisible = false">{{ t('common_export.close') }}</el-button>
        </div>
      </template>
    </el-dialog>

    <div class="recallDialog" v-show="refundConfirmDialog">
      <div class="close">
        <button @click="closeConfirmRefund" class="Btn">{{ t('common.close') }}</button>
      </div>
      <div class="text">
        <text class="txt">{{ textContent }}</text>
      </div>
      <div class="cancle">
        <button @click="closeConfirmRefund" class="Btn">{{ t('common.cancel') }}</button>
      </div>
      <div class="confirm">
        <button @click="openRefundDialog" class="Btn">{{ t('common.confirm') }}</button>
      </div>
    </div>

    <el-dialog v-model="refundDialog" :title="t('common_add.refund')" class="refundDialog" overflow draggable
      style="width: 40vw;" :before-close="closeRefundForm">
      <div style="display: flex;">
        <div class="left">
          <div class="add-item">
            <el-text style="width:4vw;">{{ t('common_add.jwcode') }}</el-text>
            <el-input v-model="refundFormData.jwcode" style="width:10vw;" disabled />
          </div>
          <div class="add-item">
            <el-text style="width:4vw;">{{ t('common_add.customerName') }}</el-text>
            <el-input v-model="refundFormData.name" style="width:10vw;" disabled />
          </div>
          <div class="add-item">
            <el-text style="width:4vw;">{{ t('common_add.market') }}</el-text>
            <el-input v-model="refundFormData.marketName" style="width:10vw;" disabled />
          </div>
          <div class="add-item">
            <el-text style="width:4vw;">{{ t('common_add.activity') }}</el-text>
            <el-input v-model="refundFormData.activityName" style="width:10vw;" disabled />
          </div>
          <div class="add-item">
            <el-text style="width:4vw;">{{ t('common_add.productName') }}</el-text>
            <el-input v-model="refundFormData.goodsName" style="width:10vw;" disabled />
          </div>
          <div style="display: flex; margin-bottom: 10px;">
            <div style=" display: flex; align-items: center;justify-content: center; ">
              <span style="color: #999999;  white-space: nowrap;">{{ t('common_add.permanentGold')
              }}：</span>
              <el-input style="padding-right: 10px;  height: 30px; width: 70px;"
                v-model="refundFormData.oldpermanentGold" disabled />
            </div>
            <div style=" display: flex; align-items: center;justify-content: center; ">
              <span style="color: #999999;  white-space: nowrap;">{{ t('common_add.freeGold') }}：</span>
              <el-input style="padding-right: 10px;  height: 30px; width: 70px;" v-model="refundFormData.oldfreeGold"
                disabled />
            </div>
          </div>
          <div class="add-item">
            <el-text style="width:4vw;">{{ t('common_add.payCurrency') }}</el-text>
            <el-input v-model="refundFormData.paymentCurrency" style="width:10vw;" disabled />
          </div>
          <div class="add-item">
            <el-text style="width:4vw;">{{ t('common_add.payAmount') }}</el-text>
            <el-input v-model="refundFormData.paymentAmount" style="width:10vw;" disabled />
          </div>
          <div class="add-item">
            <el-text style="width:4vw;">{{ t('common_add.payMethod') }}</el-text>
            <el-input v-model="refundFormData.payType" style="width:10vw;" disabled />
          </div>
          <div class="add-item">
            <el-text style="width:4vw;">{{ t('common_add.payTime') }}</el-text>
            <el-date-picker v-model="refundFormData.payTime" type="datetime" style="width:10vw;" disabled />
          </div>
          <div class="add-item">
            <el-text style="width:4vw;" size="small">{{ t('common_add.transferVoucher') }}</el-text>
            <el-form-item :rules="{ required: true, message: t('common_add.uploadPhoto'), trigger: 'change' }">
              <el-upload ref="uploadRef" :auto-upload="false" list-type="picture-card" :show-file-list="false">
                <template #default>
                  <img v-if="refundFormData.voucher" :src="refundFormData.voucher"
                    style="width: 100%; height: 100%; object-fit: cover;">
                  <el-icon v-else>
                    <Plus />
                  </el-icon>
                </template>
              </el-upload>
            </el-form-item>
          </div>
          <div class="add-item">
            <el-text style="width:4vw;">{{ t('common_add.remark') }}</el-text>
            <el-input v-model="refundFormData.remark" style="width:10vw;" :rows="2" type="textarea" maxLength="100"
              disabled show-word-limit />
          </div>
        </div>
        <div class="right">
          <div class="add-item">
            <el-text style="width:4vw;">{{ t('common_add.refundModel') }}</el-text>
            <el-radio-group v-model="refundFormData.refundModel">
              <el-radio value="0">{{ t('common_add.refundModelAll') }}</el-radio>
              <el-radio value="1">{{ t('common_add.refundModelPart') }}</el-radio>
            </el-radio-group>
          </div>
          <div v-show="refundFormData.refundModel == '1'" style="display: flex; margin-bottom: 10px;">
            <div style=" display: flex; align-items: center;justify-content: center; ">
              <span style="color: #999999;  white-space: nowrap;">{{ t('common_add.permanentGold')
              }}：</span>
              <el-input style="padding-right: 10px;  height: 30px; width: 70px;"
                v-model="refundFormData.permanentGold" />
            </div>
            <div style=" display: flex; align-items: center;justify-content: center; ">
              <span style="color: #999999;  white-space: nowrap;">{{ t('common_add.freeGold') }}：</span>
              <el-input style="padding-right: 10px;  height: 30px; width: 70px;" v-model="refundFormData.freeGold" />
            </div>
          </div>
          <div class="add-item">
            <el-text style="width:4vw;">{{ t('common_add.refundReason') }}</el-text>
            <el-input v-model="refundFormData.refundReason" style="width:10vw;" :rows="5" maxlength="150"
              show-word-limit type="textarea" />
          </div>
          <div>{{ t('common_add.tip') }}</div>
          <div style="display:flex;justify-content: center;margin-top: 5vh;">
            <el-button type="default" @click="resetRefund">{{ t('common.reset') }}</el-button>
            <el-button type="primary" @click="throttledsubmitRefund">{{ t('common.submit') }}</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<style lang="scss">
.refund-popover {
  background-color: #EEF5FE !important;
  border: none !important;
  padding: 12px !important;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  width: 100px;
  min-width: none;

  .el-popper__arrow::before {
    background-color: #EEF5FE !important;
    border-color: #EEF5FE !important;
  }
}
</style>
<style scoped lang="scss">
:deep(.detailDialog) {
        background: #F3FAFE !important;
        .left {
            width: 50%;
            height: 60vh;
            min-height: 400px;

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

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

        .right {
            width: 50%;
            height: 60vh;

            .add-item {
                display: flex;
                align-items: center;
                margin-bottom: 1vh;
            }
        }
        .voucher-img {
        width: 100px;  /* 限制宽度 */
        height: 100px; /* 限制高度 */
        border-radius: 4px;
        cursor: pointer; /* 鼠标放上去显示手型，提示可点击预览 */
      }
        .no-voucher {
        color: #909399;
        font-size: 14px;
      }
    }

    :deep(.adddialog .el-form-item__label) {
        min-width: 120px;
        width: auto;
        font-weight: 800;
        padding-bottom: 15px;
    }
  
.btnItem {
  margin-left: 10px;
  border-radius: 5px;
}
.btnDiv{
  text-align: center; 
  margin-top: 30px;
}
:deep(.adddialog) {
  min-width: 400px;
  background-color: #F3FAFE !important;
  margin-top: 8vh;
  border-radius: 8px;
}
.popover-content {
  .popover-title {
    color: #409EFF;
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 8px;
  }

  .popover-item {
    display: flex;
    font-size: 13px;
    color: #606266;
    margin-bottom: 4px;

    &:last-child {
      margin-bottom: 0;
    }

    .label {
      color: #606266;
    }

    .value {
      color: #606266;
      margin-left: 4px;
    }
  }
}

.cash-flow-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.search-card {
  margin-bottom: 10px;
  background: #F3FAFE; // 浅蓝背景
  border: none;

  :deep(.el-card__body) {
    padding: 15px;
  }
}

.search-bar {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.search-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
}

.search-item {
  display: flex;
  align-items: center;

  .label {
    font-size: 15px; // 参考 coinConsumeDetail 的 .text size="large"
    color: #000; // 或 #606266
    white-space: nowrap;
    margin-right: 8px;
    min-width: 60px;
    text-align: right;
  }

  .el-input,
  .el-select {
    width: 200px;
  }
}

.search-btn-group {
  margin-left: 20px; // 靠右对齐
  display: flex;
  gap: 10px;
}

.newAdd {
  margin-left: auto;
  display: flex;
  width: 240px;
  justify-content: flex-end;
}
.newAdd_btn{
  background-color: blueviolet;
  color: white;
}

.table-card {
  background: #E7F4FD;
  flex: 1;
  border: none;
  display: flex;
  flex-direction: column;

  :deep(.el-card__body) {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
}

.pagination-container {
  margin-top: 15px;
  display: flex;
  justify-content: flex-start;
}

// 表格样式覆盖 (参考 coinConsumeDetail)
: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__row:hover > .el-table__cell) {
  background-color: #E5EBFE !important;
}

.refundDialog {
  .left {
    width: 50%;
    height: 70vh;
    min-height: 700px;
    padding: 0 2vw;

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

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

  .right {
    width: 50%;
    height: 50vh;

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

.recallDialog {
  //撤回弹窗提示
  height: 392px;
  width: 700px;
  background-image: url('/src/assets/receive-recall.png');
  position: fixed; // 固定定位，相对于浏览器窗口
  top: 50%; // 距离顶部50%
  left: 50%; // 距离左侧50%
  transform: translate(-50%, -50%); // 向左、向上平移自身宽高的50%，实现居中
  z-index: 1000; // 确保在其他元素上层显示

  .close {
    position: absolute;
    left: 625px;
    top: 20px;
    height: 38px;
    width: 38px;
    opacity: 0;

    .Btn {
      height: 100%;
      width: 100%;
      border-radius: 10px;
    }
  }

  .text {
    position: absolute;
    left: 185px;
    top: 190px;
    height: 67px;
    width: 500px;

    .txt {
      height: 100%;
      width: 100%;
      color: #001a42;
      font-family: "PingFang SC";
      font-size: 38px;
      font-style: normal;
      font-weight: 900;
      line-height: normal;
    }
  }

  .cancle {
    position: absolute;
    left: 185px;
    top: 304px;
    height: 55px;
    width: 150px;
    opacity: 0;

    .Btn {
      height: 100%;
      width: 100%;
      border-radius: 20px;
    }
  }

  .confirm {
    position: absolute;
    left: 375px;
    top: 304px;
    height: 55px;
    width: 150px;
    opacity: 0;

    .Btn {
      height: 100%;
      width: 100%;
      border-radius: 20px;
    }
  }
}
</style>