gold-vue/src/views/moneyManage/receiveDetail/receiveHead.vue

<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 :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 = []
  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>