orgManager/src/views/report/billManagement/index.vue

<template>
   <div class="app-container">
   <table-search-card  :model="queryParams" @getList="getList" @handleQuery="handleQuery" @resetQuery="resetQuery">
     <template #left>
      <el-form-item prop="month">
         <el-date-picker
          v-model="queryParams.month"
          type="month"
          format="YYYY-MM"
          value-format="YYYY-MM"
          :placeholder="t('账单月份')"
        />
      </el-form-item>
       <!-- <table-search-date v-model:dateRange="dateRange" v-model:operateTimeType="operateTimeType"></table-search-date> -->
      <select-input-form ref="selectInputFormRef" :queryParamsList="queryParamsList" :queryParams="queryParams"
         @handleQuery="handleQuery">
      </select-input-form>
      <el-form-item prop="currencyType">
         <custom-select style="width: 130px;" collapse-tags collapse-tags-tooltip v-model="queryParams.currencyType" :options="currencySelectArr" :placeholder="t('币种')"></custom-select>
      </el-form-item>
     </template>
     <template #right>
      <!-- <el-button type="primary" icon="Plus" @click="handleAdd" v-hasPermi="['tenant:notice:add']">{{ t('新增公告') }}</el-button> -->
     </template>
   </table-search-card>

  <el-table v-loading="loading" class="c-table-main" :data="agentList" border >
   <el-table-column :label="t('线路ID')" min-width="100" align="center" prop="siteId" >
       <template #default="{row}">
          {{ row.siteId|| '--' }}
       </template>
       </el-table-column>
      <el-table-column :label="t('线路名称')" align="center" min-width="150"  >
      <template #default="{row}">
         {{ row.siteName || '--' }}
      </template>
      </el-table-column>
      <el-table-column :label="t('租户')" align="center" min-width="150"  >
      <template #default="{row}">
         {{ row.tenantId || '--' }}
      </template>
      </el-table-column>
      
      <el-table-column :label="t('币种')" align="center" min-width="150" prop="createTime" >
      <template #default="{row}">
       {{ row.currencyDisplay }}
      </template>
      </el-table-column>
      <el-table-column :label="t('账单月份')" align="center" min-width="150" prop="month" >
      <template #default="{row}">
       {{ row.month }}
      </template>
      </el-table-column>
      <el-table-column :label="t('账单总额')" align="center" min-width="150" prop="profitAmount" >
      <template #default="{row}">
       {{ row.profitAmount }}
      </template>
      </el-table-column>
      <el-table-column :label="t('平台异常调整(U)')" align="center" min-width="150" prop="abnormalAdjustmentAmount" >
      <template #default="{row}">
       {{ row.abnormalAdjustmentAmount == null ? '--' : row.abnormalAdjustmentAmount }}

      </template>
      </el-table-column>
      <el-table-column :label="t('调整后最终总额(U)')" align="center" min-width="150" prop="adjustActualPayAmount" >
      <template #default="{row}">
       {{ row.adjustActualPayAmount == null ? '--' : row.adjustActualPayAmount }}
      </template>
      </el-table-column>
      <el-table-column :label="t('账单状态')" align="center" min-width="150" prop="billStatus" >
      <template #default="{row}">
        <span v-if="row.billStatus == 1">{{ t('待核验') }}</span>
        <span v-if="row.billStatus == 2">{{ t('待结算') }}</span>
        <span v-if="row.billStatus == 3">{{ t('待支付') }}</span>
        <span v-if="row.billStatus == 4">{{ t('未结算') }}</span>
        <span v-if="row.billStatus == 5">{{ t('待确认') }}</span>
        <span v-if="row.billStatus == 6">{{ t('已结算') }}</span>
      </template>
      </el-table-column>
      <el-table-column :label="t('站长备注')" align="center" min-width="150" prop="remark" >
      <template #default="{row}">
       {{ row.remark }}
      </template>
      </el-table-column>
      <el-table-column :label="t('技术备注')" align="center" min-width="150" prop="profitAmount" >
      <template #default="{row}">
       {{ row.createBy }}
      </template>
      </el-table-column>
      <el-table-column :label="t('操作人')" align="center" min-width="150" prop="createBy" >
      <template #default="{row}">
         {{ row.createBy||row.updateBy }}
      </template>
      </el-table-column>
      <el-table-column :label="t('操作时间')" align="center" min-width="150" prop="createTime" >
      <template #default="{row}">
         {{ parseTime(row.createTime) || parseTime(row.updateTime) }}
      </template>
      </el-table-column>
     <el-table-column :label="t('操作')" align="center" width="160">
        <template #default="{ row }">
            <el-button link type="primary" @click="handleView(row)" v-hasPermi="['report:month:query']">{{ t('详情') }}</el-button>
            <el-button link  @click="opInfo(row,'payment')" :disabled="row.billStatus != 4 || row.billStatus != 5" v-hasPermi="['report:month:payment:adjust']">{{
            t('调整支付额度') }}</el-button>
             <el-button link :disabled="row.billStatus != 4 || row.billStatus != 5" @click="opInfo(row,'confirm')" v-hasPermi="['report:month:update:status']">{{

            t('直接确认无误') }}</el-button>
        </template>
     </el-table-column>
  </el-table>

  <pagination
     v-show="total > 0"
     :total="total"
     v-model:page="queryParams.pageNum"
     v-model:limit="queryParams.pageSize"
     @pagination="getList"
  />
        <!-- 新增站点 -->
   <details-dialog  v-if="detailsShowDialog" :modifyDate="modifyDate" @submit="getList"
   v-model:show="detailsShowDialog"></details-dialog>
   <payment-dialog v-if="defendShowDialog" :addEditStatus="addEditStatus" :modifyDate="modifyDate" @submit="getList"

   v-model:show="defendShowDialog"></payment-dialog>
   </div>
</template>

<script setup name="Agent">
import {getReportBillList} from "@/api/report";
import CustomSelect from '@/components/CustomSelect';
import PaymentDialog from "./components/PaymentDialog";
import DetailsDialog from "./components/DetailsDialog";
import { getLocalStorage } from "@/utils/auth";
import Crontab from '@/components/Crontab'
import { onMounted } from "vue";
const router = useRouter();
const { proxy } = getCurrentInstance();
const agentList = ref([]);
const loading = ref(true);
const total = ref(0);
const currencySelectArr = getLocalStorage('currencySelect')?.map(item => {
    return {
        label: `${item.currencyName}(${item.currencyCode})`,
        value: item.currencyCode
    };
}); 
const openView = ref(false);

const queryParamsList = ref([{
   label: proxy.t('站点名称'),
   value: 'siteName',
},{
   label: proxy.t('站点ID'),
   value: 'siteId',
}]);
const data = reactive({
form: {},
queryParams: {
   pageNum: 1,
    pageSize: 10,
    searchType:'siteName',
    month: '',
},
});
// 批量操作
const tableRef = ref(),
   isAllSelection = ref(false),  // 是否全选
   selectionData = ref([]),   // 选中的表格数据
   batchOpType = ref('');          // 选中的批量操作类型
// 勾选表格
const tableSelect = (val) => {
   selectionData.value = val;
   // 是否全选中
   if (val.length == agentList.value.length) {
      isAllSelection.value = true;
   } else {
      isAllSelection.value = false;
   }
}
const { queryParams } = toRefs(data);
 // 新增按钮操作
 const addEditStatus = ref('add'), isShowDialog = ref(false), editDataId = ref(''),modifyDate = ref({});
/** 查询列表 */
function getList() {
loading.value = true;
getReportBillList(queryParams.value).then(response => {
agentList.value = response.rows;
total.value = response.total;
loading.value = false;
});
}
const detailsShowDialog = ref(false);

const handleView = (row) => {
  detailsShowDialog.value = true;
  modifyDate.value = row;
  addEditStatus.value = 'details';
}
/** 搜索按钮操作 */
function handleQuery() {
queryParams.value.pageNum = 1;
getList();
}
const defendShowDialog = ref(false);
     //修改、详情、删除按钮操作
   const opInfo = (row, type) => {
      switch (type) {
         case 'payment':
               modifyDate.value = row;
               addEditStatus.value = 'payment';
               defendShowDialog.value = true;
            break;
            case 'confirm':
               modifyDate.value = row;
               addEditStatus.value = 'confirm';
               defendShowDialog.value = true;
            break;
      }
   }
/** 重置按钮操作 */
function resetQuery() {
proxy.resetForm("queryRef");
handleQuery();
}
//初始化
onMounted(() => { 
   getList();
});
</script>

<style scoped lang="scss">
.label-scoreRatio{
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
span{
  width: 120px;
  text-align: right;
  font-weight: 700;
  padding-right: 12px;
}
}
.scoreRatioTable{
width: calc(100% - 120px);
margin-left: 120px;
}
.two-line-clamp {
   width: 100%;
   height: 50px;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   overflow: hidden;
   text-overflow: ellipsis;
   flex-wrap: nowrap;
   line-height: 23px;

}
</style>