orgManager/src/views/operations/apiBill/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 @select="tableSelect"
  @select-all="tableSelect">
   <el-table-column align="center" type="selection" width="55" />
   <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('站点名称(ID)')" align="center" min-width="150"  >
      <template #default="{row}">
         <span v-if="row.siteName">{{ `${row.siteName}(${row.siteId})`}}</span> 
         <span v-else>--</span>

      </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('币种')" 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="createTime" >
      <template #default="{row}">
        {{ row.billAmount }}
      </template>
      </el-table-column>
      <el-table-column :label="t('账单金额(U)')" align="center" min-width="150" prop="createTime" >
      <template #default="{row}">
       {{ row.actualBillAmount }}
      </template>
      </el-table-column>
      <el-table-column :label="t('账单状态')" align="center" min-width="150" prop="createTime" >
      <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" width="160">
        <template #default="scope">
         --
            <!-- <el-button link type="primary" @click="handleView(scope.row)" v-hasPermi="['tenant:notice:query']">{{ 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"
  />
        <!-- 新增站点 -->
 <add-site-dialog v-if="isShowDialog" :addEditStatus="addEditStatus" :modifyDate="modifyDate" @submit="getList"
   v-model:show="isShowDialog"></add-site-dialog>
   <modify-dialog v-if="openView" :modifyDate="modifyDate" @submit="getList"
      v-model:show="openView"></modify-dialog>
   </div>
</template>

<script setup name="Agent">
import {getTenantQuotaMonthList,getTenantNoticeDetail} from "@/api/operations";
import CustomSelect from '@/components/CustomSelect';
import AddSiteDialog from "./components/AddSiteDialog"; // 新增站点弹窗
import ModifyDialog from "./components/ModifyDialog";
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;
getTenantQuotaMonthList(queryParams.value).then(response => {
agentList.value = response.rows;
total.value = response.total;
loading.value = false;
});
}
const handleView = (row) => {
  openView.value = true;
  getTenantNoticeDetail(row.id).then(response => {
    modifyDate.value = response.data;
  });
//   modifyDate.value = row;
}
/** 搜索按钮操作 */
function handleQuery() {
queryParams.value.pageNum = 1;
getList();
}

/** 重置按钮操作 */
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>