|
@@ -1,314 +1,406 @@
|
|
|
<template>
|
|
|
- <div class="contenBox">
|
|
|
- <!-- 表格标题栏 -->
|
|
|
- <div class="table-action flex-b">
|
|
|
- <div class="customList">{{ contentConfig.header.title || '' }}</div>
|
|
|
- <div class="btns">
|
|
|
- <slot name="button"></slot>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 表格容器(核心:控制高度铺满剩余空间) -->
|
|
|
- <div class="table-container">
|
|
|
- <el-table
|
|
|
- :data="pageList"
|
|
|
- style="width: 100%; height: 100%"
|
|
|
- @selection-change="handleSelectionChange"
|
|
|
- ref="multipleTableRef"
|
|
|
- v-bind="props.contentConfig?.tableProps"
|
|
|
- :row-key="getRowKeys"
|
|
|
- v-loading="loading"
|
|
|
- size="medium"
|
|
|
- >
|
|
|
- <!-- 表格列配置 -->
|
|
|
- <template v-for="item in contentConfig.propsList" :key="item.prop || item.label">
|
|
|
- <!-- 序号列 -->
|
|
|
- <el-table-column
|
|
|
- v-if="item.type === 'index'"
|
|
|
- type="index"
|
|
|
- :fixed="item.fixed"
|
|
|
- :width="item.width || 50"
|
|
|
- align="center"
|
|
|
- />
|
|
|
-
|
|
|
- <!-- 选择列 -->
|
|
|
- <el-table-column
|
|
|
- v-if="item.type === 'selection'"
|
|
|
- type="selection"
|
|
|
- :fixed="item.fixed"
|
|
|
- width="55"
|
|
|
- align="center"
|
|
|
- :reserve-selection="true"
|
|
|
- />
|
|
|
-
|
|
|
- <!-- 操作列 -->
|
|
|
- <el-table-column
|
|
|
- v-else-if="item.type === 'handler'"
|
|
|
- :fixed="item.fixed"
|
|
|
- :label="item.label || '操作'"
|
|
|
- :width="item.width || 150"
|
|
|
- align="center"
|
|
|
- >
|
|
|
- <template #default="scope">
|
|
|
- <slot :name="item.slotName" v-bind="scope"></slot>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
-
|
|
|
- <!-- 自定义列 -->
|
|
|
- <el-table-column
|
|
|
- v-else-if="item.type === 'custom'"
|
|
|
- show-overflow-tooltip
|
|
|
- :fixed="item.fixed"
|
|
|
- :label="item.label"
|
|
|
- :width="item.width"
|
|
|
- :prop="item.prop"
|
|
|
- :sortable="item.sortable || false"
|
|
|
- :column-key="item.prop"
|
|
|
- >
|
|
|
- <template #default="scope">
|
|
|
- <slot :name="item.slotName" v-bind="scope"></slot>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
+ <div class="contenBox">
|
|
|
+ <div class="table-action flex-b">
|
|
|
+ <div class="customList">{{ contentConfig.header.title ? contentConfig.header.title : '' }}</div>
|
|
|
+ <div class="btns">
|
|
|
+ <slot name="button"></slot>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-table :data="pageList" style="width: 100%; max-height: 55vh; overflow: auto"
|
|
|
+ @selection-change="handleSelectionChange" ref="multipleTableRef" v-bind="props.contentConfig?.tableProps"
|
|
|
+ :row-key="getRowKeys" v-loading="loading">
|
|
|
+ <template v-for="item in contentConfig.propsList">
|
|
|
+ <!-- 序号 -->
|
|
|
+ <el-table-column :fixed="item.fixed" v-if="item.type === 'index'" type="index" :key="item.prop" center>
|
|
|
+ </el-table-column>
|
|
|
+ <!-- 选择 -->
|
|
|
+ <el-table-column :fixed="item.fixed" type="selection" width="55" align="center" :key="item.prop"
|
|
|
+ v-if="item.type === 'selection'" :reserve-selection="true" />
|
|
|
+ <!-- 操作类 -->
|
|
|
+ <el-table-column :key="item" :fixed="item.fixed" align="center" v-bind="item"
|
|
|
+ v-else-if="item.type === 'handler'">
|
|
|
+ <template #default="scope">
|
|
|
+ <slot :name="item.slotName" v-bind="scope"></slot>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
|
|
|
- <!-- 时间格式化列 -->
|
|
|
- <el-table-column
|
|
|
- v-else-if="item.type === 'time'"
|
|
|
- show-overflow-tooltip
|
|
|
- :fixed="item.fixed"
|
|
|
- :label="item.label"
|
|
|
- :width="item.width || 180"
|
|
|
- align="center"
|
|
|
- >
|
|
|
- <template #default="scope">
|
|
|
- {{ parseTime(scope.row[item.prop]) }}
|
|
|
+ <!-- 自定义类 -->
|
|
|
+ <el-table-column show-overflow-tooltip :fixed="item.fixed" :key="item.label"
|
|
|
+ v-else-if="item.type === 'custom'" :label="item.label" :width="item.width" :prop="item.prop"
|
|
|
+ :sortable="item.sortable || false" :column-key="item.prop">
|
|
|
+ <template #default="scope">
|
|
|
+ <slot :name="item.slotName" v-bind="scope"></slot>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <!-- 时间类 -->
|
|
|
+ <el-table-column show-overflow-tooltip :fixed="item.fixed" :key="item.label"
|
|
|
+ v-else-if="item.type === 'time'" align="center" :label="item.label" :width="item.width">
|
|
|
+ <template #default="scope">
|
|
|
+ {{ parseTime(scope.row[item.prop]) }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <!-- 普通渲染类 -->
|
|
|
+ <el-table-column :fixed="item.fixed" show-overflow-tooltip v-else-if="item.type === 'normal'"
|
|
|
+ :key="item.label" v-bind="item" :prop="item.prop" :sortable="item.sortable || false"
|
|
|
+ :column-key="item.prop" />
|
|
|
+ <!-- 倒序类 -->
|
|
|
+ <el-table-column :fixed="item.fixed" show-overflow-tooltip v-else-if="item.type === 'sortable'"
|
|
|
+ :key="item.label" sortable v-bind="item" />
|
|
|
</template>
|
|
|
- </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <div class="flex-b">
|
|
|
+ <div v-if="contentConfig.moneyTotal">
|
|
|
+ <div class="flex" v-if="contentConfig.moneyTotalType === false">
|
|
|
+ <div class="footSlotStyle mr10">小计:</div>
|
|
|
+ <div class="footSlotStyle mr20" v-if="!contentConfig.customSubtotal">
|
|
|
+ 数量 {{ subNumber || 0 }}
|
|
|
+ 张
|
|
|
+ </div>
|
|
|
+ <div class="footSlotStyle mr20" v-else>数量 {{ subtotalNum || 0 }}</div>
|
|
|
+ <slot name="subtotalSlot"></slot>
|
|
|
+ </div>
|
|
|
+ <div v-else class="flex">
|
|
|
+ <div class="footSlotStyle mr10">小计:</div>
|
|
|
+ <div class="footSlotStyle mr20" v-if="!contentConfig.customSubtotal">
|
|
|
+ 费用金额 {{ subtotal || 0 }}元
|
|
|
+ </div>
|
|
|
+ <div class="footSlotStyle mr20" v-else>费用金额 {{ subtotalNum || 0 }}元</div>
|
|
|
+ <slot name="subtotalSlot"></slot>
|
|
|
+ </div>
|
|
|
+ <div v-if="contentConfig.moneyTotalType === false" class="flex">
|
|
|
+ <div class="footSlotStyle mr10">总计:</div>
|
|
|
+ <div class="footSlotStyle mr20">数量 {{ resDate.moneyTotal || 0 }} 张</div>
|
|
|
+ <slot name="totalSlot"></slot>
|
|
|
+ </div>
|
|
|
+ <div v-else class="flex">
|
|
|
+ <div class="footSlotStyle mr10">总计:</div>
|
|
|
+ <div class="footSlotStyle mr20">费用金额 {{ resDate.moneyTotal || 0 }} 元</div>
|
|
|
+ <slot name="totalSlot"></slot>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-else-if="contentConfig.energyMonery">
|
|
|
+ <div class="flex">
|
|
|
+ <div class="footSlotStyle mr10">小计:</div>
|
|
|
+ <div class="footSlotStyle mr20 energyClass">
|
|
|
+ <div class="itemName">电:{{ electricity || 0 }}</div>
|
|
|
+ <div class="itemName">水:{{ water || 0 }}</div>
|
|
|
+ <div class="itemName">气:{{ gas || 0 }}</div>
|
|
|
+ </div>
|
|
|
+ <slot name="subtotalSlot"></slot>
|
|
|
+ </div>
|
|
|
+ <div class="flex">
|
|
|
+ <div class="footSlotStyle mr10">总计:</div>
|
|
|
+ <div class="footSlotStyle mr20 energyClass">
|
|
|
+ <div class="itemName">电:{{ electricityTotalPrice || 0 }}</div>
|
|
|
+ <div class="itemName">水:{{ waterTotalPrice || 0 }}</div>
|
|
|
+ <div class="itemName">气:{{ gasTotalPrice || 0 }}</div>
|
|
|
+ </div>
|
|
|
+ <slot name="totalSlot"></slot>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 其他/能耗费用计算 -->
|
|
|
+ <div style="width: 60%;" v-else-if="contentConfig.energyConsumption">
|
|
|
+ <div class="flex" v-if="contentConfig.energyConsumptionType === false">
|
|
|
+ <div class="footSlotStyle mr10">能耗总量:</div>
|
|
|
+ <div class="footSlotStyle mr20 energyClass">
|
|
|
+ <div class="itemName" v-for="(item, index) in rowDate.value" :key="index">{{ item.energyName
|
|
|
+ }}:{{
|
|
|
+ item.dosage || 0 }}
|
|
|
+ </div>
|
|
|
|
|
|
- <!-- 普通列 -->
|
|
|
- <el-table-column
|
|
|
- v-else
|
|
|
- show-overflow-tooltip
|
|
|
- :fixed="item.fixed"
|
|
|
- :label="item.label"
|
|
|
- :width="item.width"
|
|
|
- :prop="item.prop"
|
|
|
- :sortable="item.sortable || false"
|
|
|
- :column-key="item.prop"
|
|
|
- align="center"
|
|
|
- />
|
|
|
- </template>
|
|
|
- </el-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="flex" v-else>
|
|
|
+ <div class="footSlotStyle mr10">能耗总量:</div>
|
|
|
+ <div class="footSlotStyle mr20 energyClass">
|
|
|
+ <div class="itemName">电:{{ electricityDosage || 0 }}</div>
|
|
|
+ <div class="itemName">水:{{ waterDosage || 0 }}</div>
|
|
|
+ <div class="itemName">气:{{ gasDosage || 0 }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="flex" v-else></div>
|
|
|
+ <el-pagination class="mt10" v-model:current-page="systemStore.pageInfo.pageNum"
|
|
|
+ v-model:page-size="systemStore.pageInfo.pageSize" :page-sizes="sizes" :small="false" :disabled="false"
|
|
|
+ :background="true" layout="total, sizes, prev, pager, next, jumper" :total="pageTotalCount"
|
|
|
+ @size-change="onPageSizeChange" @current-change="onPageChange" />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts" name="content">
|
|
|
-import { ref, watch, onMounted } from 'vue';
|
|
|
-import type { Table } from 'element-plus';
|
|
|
import useSystemStore from '@/store/main';
|
|
|
-import useUserStore from '@/store/modules/user';
|
|
|
import { parseTime } from '@/utils/ruoyi';
|
|
|
+import useUserStore from '@/store/modules/user';
|
|
|
+const userStore = useUserStore().userInfo.userName === 'admin' ? '' : useUserStore().userInfo.userId;
|
|
|
+import { ref, watch } from 'vue';
|
|
|
+// import { ElTable } from 'element-plus';
|
|
|
+import { useSharedValueStore } from './sharedValueStore';
|
|
|
|
|
|
-// Props 定义
|
|
|
-interface IProps {
|
|
|
- contentConfig: {
|
|
|
- pageName: string;
|
|
|
- status: string;
|
|
|
- createUser: string;
|
|
|
- oneself: number;
|
|
|
- header: { title: string };
|
|
|
- tableProps?: Record<string, any>; // 表格额外属性(如 border)
|
|
|
- propsList: Array<{
|
|
|
- prop?: string;
|
|
|
- label: string;
|
|
|
- type?: 'index' | 'selection' | 'handler' | 'custom' | 'time' | string;
|
|
|
- width?: number | string;
|
|
|
- fixed?: 'left' | 'right' | boolean;
|
|
|
- slotName?: string;
|
|
|
- sortable?: boolean;
|
|
|
- [key: string]: any;
|
|
|
- }>;
|
|
|
- pageListParams?: Record<string, any>;
|
|
|
- // 其他原有配置...
|
|
|
- energyConsumption?: boolean;
|
|
|
- energyConsumptionType?: boolean;
|
|
|
- // ...
|
|
|
- };
|
|
|
- sizes?: number[];
|
|
|
- showSummary?: boolean;
|
|
|
- summaryMethod?: () => any;
|
|
|
- subtotalNum?: number;
|
|
|
-}
|
|
|
-const props = withDefaults(defineProps<IProps>(), {
|
|
|
- sizes: () => [10, 50, 100, 300, 500],
|
|
|
- showSummary: false,
|
|
|
- customSubtotal: false,
|
|
|
-});
|
|
|
+const props = withDefaults(
|
|
|
+ defineProps<{
|
|
|
+ contentConfig: {
|
|
|
+ pageName: string;
|
|
|
+ status: string;
|
|
|
+ createUser: string;
|
|
|
+ oneself: number;
|
|
|
+ header: {
|
|
|
+ title: string;
|
|
|
+ };
|
|
|
+ tableProps: any;
|
|
|
+ propsList: any[];
|
|
|
+ pageListParams?: {};
|
|
|
+ moneyTotal?: boolean;
|
|
|
+ energyConsumption?: boolean;
|
|
|
+ energyConsumptionType?: boolean;
|
|
|
+ energyMonery?: boolean;
|
|
|
+ moneyTotalType?: boolean;
|
|
|
+ customSubtotal?: boolean;
|
|
|
+ };
|
|
|
+ sizes?: number[];
|
|
|
+ showSummary?: boolean;
|
|
|
+ summaryMethod?: () => any;
|
|
|
+ subtotalNum?: number;
|
|
|
+ }>(),
|
|
|
+ {
|
|
|
+ sizes: [10, 50, 100, 300, 500],
|
|
|
+ customSubtotal: false,
|
|
|
+ }
|
|
|
+);
|
|
|
const emit = defineEmits(['handleSelect', 'pageChanged']);
|
|
|
+const loading = ref(true);
|
|
|
|
|
|
-// 状态管理
|
|
|
+// 请求数据
|
|
|
const systemStore = useSystemStore();
|
|
|
-const userStore = useUserStore().userInfo.userName === 'admin' ? '' : useUserStore().userInfo.userId;
|
|
|
-const { pageList, pageTotalCount, resDate } = storeToRefs(systemStore);
|
|
|
-const loading = ref(true);
|
|
|
-const multipleTableRef = ref<InstanceType<typeof Table>>();
|
|
|
-const selectedItems = ref<any[]>([]);
|
|
|
+// const pageNum = ref(1);
|
|
|
+// const pageSize = ref(10);
|
|
|
|
|
|
-// 初始化表格数据
|
|
|
-onMounted(() => {
|
|
|
- fetchPageListData();
|
|
|
-});
|
|
|
+const sharedValueStore = useSharedValueStore();
|
|
|
+const sharedValue = computed(() => sharedValueStore.sharedValue);
|
|
|
|
|
|
-// 请求表格数据
|
|
|
-async function fetchPageListData(queryInfo: Record<string, any> = {}) {
|
|
|
- loading.value = true;
|
|
|
- try {
|
|
|
- await systemStore.getPageListDataAction(props.contentConfig.pageName, {
|
|
|
- pageNum: systemStore.pageInfo.pageNum,
|
|
|
- pageSize: systemStore.pageInfo.pageSize,
|
|
|
- userId: userStore,
|
|
|
- status: props.contentConfig.status,
|
|
|
- createUser: props.contentConfig.createUser,
|
|
|
- oneself: props.contentConfig.oneself,
|
|
|
- ...queryInfo,
|
|
|
- ...props.contentConfig.pageListParams,
|
|
|
- });
|
|
|
- } finally {
|
|
|
- loading.value = false;
|
|
|
- }
|
|
|
+// 获取列表
|
|
|
+async function fetchPageListData(queryInfo: any = {}) {
|
|
|
+ loading.value = true;
|
|
|
+ // const pageNumber = pageNum.value;
|
|
|
+ // const pageSizeValue = pageSize.value;
|
|
|
+ // 2.发生网络请求
|
|
|
+ await systemStore
|
|
|
+ .getPageListDataAction(props.contentConfig.pageName, {
|
|
|
+ pageNum: systemStore.pageInfo.pageNum,
|
|
|
+ pageSize: systemStore.pageInfo.pageSize,
|
|
|
+ userId: userStore,
|
|
|
+ status: props.contentConfig.status,
|
|
|
+ createUser: props.contentConfig.createUser,
|
|
|
+ oneself: props.contentConfig.oneself,
|
|
|
+ ...queryInfo,
|
|
|
+ ...props.contentConfig.pageListParams,
|
|
|
+ })
|
|
|
+ .then(res => {
|
|
|
+ loading.value = false;
|
|
|
+ });
|
|
|
}
|
|
|
|
|
|
-// 监听页面操作后刷新表格
|
|
|
-systemStore.$onAction(({ name }) => {
|
|
|
- if (['newPageDataAction', 'deletePageDataAction'].includes(name)) {
|
|
|
- systemStore.pageInfo.pageNum = 1;
|
|
|
- systemStore.pageInfo.pageSize = 50;
|
|
|
- fetchPageListData(); // 重新加载第一页
|
|
|
- }
|
|
|
+fetchPageListData();
|
|
|
+systemStore.$onAction(arg => {
|
|
|
+ if (arg.name === 'newPageDataAction' || arg.name === 'deletePageDataAction') {
|
|
|
+ // pageNum.value = 1;
|
|
|
+ // pageSize.value = 10;
|
|
|
+ systemStore.pageInfo.pageNum = 1;
|
|
|
+ systemStore.pageInfo.pageSize = 50;
|
|
|
+ }
|
|
|
});
|
|
|
|
|
|
-// 表格选择事件
|
|
|
-function handleSelectionChange(selection: any[]) {
|
|
|
- selectedItems.value = selection;
|
|
|
- emit('handleSelect', selection);
|
|
|
-}
|
|
|
-
|
|
|
-// 行唯一标识
|
|
|
-const getRowKeys = (row: any) => row.checkId || row.id;
|
|
|
-
|
|
|
-// 其他原有逻辑...
|
|
|
+// 2.展示数据
|
|
|
+const { pageList, pageTotalCount, resDate } = storeToRefs(systemStore);
|
|
|
+// 监听列表数据变化清空选择器
|
|
|
+const multipleTableRef = ref();
|
|
|
+let subtotal = ref(0 as any);
|
|
|
+let subNumber = ref(0 as any);
|
|
|
const clearFlag = ref(true);
|
|
|
const rowDate = reactive<any>([]);
|
|
|
-// ...(省略原有其他状态逻辑,如 subtotal、energy 相关)...
|
|
|
+const electricityDosage = ref();
|
|
|
+const gasDosage = ref();
|
|
|
+const waterDosage = ref();
|
|
|
+const electricityTotalPrice = ref();
|
|
|
+const gasTotalPrice = ref();
|
|
|
+const waterTotalPrice = ref();
|
|
|
+watch(
|
|
|
+ () => resDate,
|
|
|
+ (newValue: any) => {
|
|
|
+ if (props.contentConfig?.energyConsumption === true) {
|
|
|
+ if (props.contentConfig?.energyConsumptionType === false) {
|
|
|
+ rowDate.value = newValue._object.resDate.otherEnergyList
|
|
|
+ } else {
|
|
|
+ electricityDosage.value = newValue._object.resDate.electricityDosage
|
|
|
+ gasDosage.value = newValue._object.resDate.gasDosage
|
|
|
+ waterDosage.value = newValue._object.resDate.waterDosage
|
|
|
+ }
|
|
|
+ } if (props.contentConfig?.energyMonery === true) {
|
|
|
+ electricityTotalPrice.value = newValue._object.resDate.electricityDosage
|
|
|
+ gasTotalPrice.value = newValue._object.resDate.gasDosage
|
|
|
+ waterTotalPrice.value = newValue._object.resDate.waterDosage
|
|
|
+ }
|
|
|
|
|
|
-// 监听 resDate 变化(原有逻辑保留)
|
|
|
+ },
|
|
|
+ { deep: true }
|
|
|
+);
|
|
|
watch(
|
|
|
- () => resDate,
|
|
|
- (newValue: any) => {
|
|
|
- if (props.contentConfig?.energyConsumption === true) {
|
|
|
- // ...原有能源统计逻辑...
|
|
|
- }
|
|
|
- },
|
|
|
- { deep: true }
|
|
|
+ () => pageList,
|
|
|
+ (newValue: any) => {
|
|
|
+ if (clearFlag.value) {
|
|
|
+ multipleTableRef.value!.clearSelection();
|
|
|
+ subtotal.value = 0;
|
|
|
+ subNumber.value = 0;
|
|
|
+ }
|
|
|
+ // 控制是否清空所选项
|
|
|
+ clearFlag.value = true;
|
|
|
+ // pageList.value.forEach((item: any) => {
|
|
|
+ // subtotal.value += item.moneyTotal;
|
|
|
+ // });
|
|
|
+ // subtotal.value = Number(subtotal.value.toFixed(2)).toFixed(2);
|
|
|
+ },
|
|
|
+ { deep: true }
|
|
|
);
|
|
|
+// 处理选中状态
|
|
|
+const selectedItems = ref([] as any);
|
|
|
|
|
|
-// 暴露方法给父组件
|
|
|
-defineExpose({
|
|
|
- fetchPageListData,
|
|
|
- clearSelection: () => multipleTableRef.value?.clearSelection(),
|
|
|
- // ...其他需要暴露的方法...
|
|
|
-});
|
|
|
-</script>
|
|
|
+const getRowKeys = row => {
|
|
|
+ return row.checkId;
|
|
|
+};
|
|
|
|
|
|
-<style scoped lang="scss">
|
|
|
-/* 容器样式:启用 Flex 布局 */
|
|
|
-.contenBox {
|
|
|
- flex: 1;
|
|
|
- padding: 15px 20px 20px 20px;
|
|
|
- margin-top: 20px;
|
|
|
- background-color: #fff;
|
|
|
- border-radius: 4px; /* 可选:添加边框圆角 */
|
|
|
- display: flex; /* 核心:Flex 布局 */
|
|
|
- flex-direction: column; /* 垂直排列 */
|
|
|
- height: 100%; /* 继承父容器高度(需确保父容器有高度) */
|
|
|
- min-height: 400px; /* 最小高度,避免内容过少时表格过矮 */
|
|
|
- box-sizing: border-box; /* 包含 padding 计算高度 */
|
|
|
-}
|
|
|
+const echoWay = async () => {
|
|
|
+ await pageList.value.forEach((row: any) => {
|
|
|
+ if (selectedItems.value!.indexOf(row.checkId) >= 0) {
|
|
|
+ multipleTableRef.value!.toggleRowSelection(row, true);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ // console.log(selectedItems.value);
|
|
|
+};
|
|
|
|
|
|
-/* 标题栏样式 */
|
|
|
-.table-action {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- height: 40px; /* 固定高度,不参与弹性拉伸 */
|
|
|
- margin-bottom: 15px;
|
|
|
- padding: 0 5px;
|
|
|
+// 清空多选
|
|
|
+function clearSelection() {
|
|
|
+ if (pageList) {
|
|
|
+ multipleTableRef.value!.clearSelection();
|
|
|
+ }
|
|
|
+}
|
|
|
+const water = ref();
|
|
|
+const electricity = ref();
|
|
|
+const gas = ref();
|
|
|
+// 多选框切换
|
|
|
+function handleSelectionChange(e: any) {
|
|
|
+ emit('handleSelect', e);
|
|
|
+ if (props.contentConfig.energyMonery) {
|
|
|
+ water.value = 0;
|
|
|
+ electricity.value = 0;
|
|
|
+ gas.value = 0;
|
|
|
+ e.forEach(item => {
|
|
|
+ if (item.energyType == '水') {
|
|
|
+ let waters = item.moneyTotal * 100; // 将金额转换为分;
|
|
|
+ water.value += waters;
|
|
|
+ } else if (item.energyType == '电') {
|
|
|
+ let electricitys = item.moneyTotal * 100; // 将金额转换为分;
|
|
|
+ electricity.value += electricitys;
|
|
|
+ } else if (item.energyType == '气') {
|
|
|
+ let gase = item.moneyTotal * 100; // 将金额转换为分;
|
|
|
+ gas.value += gase;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ water.value = (water.value / 100).toFixed(2);
|
|
|
+ electricity.value = (electricity.value / 100).toFixed(2);
|
|
|
+ gas.value = (gas.value / 100).toFixed(2);
|
|
|
+ console.log('zheshi', water.value, electricity.value, gas.value);
|
|
|
|
|
|
- .customList {
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 600;
|
|
|
- color: #303133;
|
|
|
- }
|
|
|
+ } else {
|
|
|
+ subtotal.value = 0;
|
|
|
+ subNumber.value = 0;
|
|
|
+ selectedItems.value = [];
|
|
|
+ e.forEach(item => {
|
|
|
+ subNumber.value += item.moneyTotal;
|
|
|
+ let moneyTotalInCents = item.moneyTotal * 100; // 将金额转换为分
|
|
|
+ subtotal.value += moneyTotalInCents;
|
|
|
+ selectedItems.value.push(item.checkId);
|
|
|
+ });
|
|
|
+ subtotal.value = (subtotal.value / 100).toFixed(2);
|
|
|
+ // selectedItems.value = e.map(item => {
|
|
|
+ // console.log(item.moneyTotal);
|
|
|
+ // subtotal.value += item.moneyTotal;
|
|
|
+ // return item.checkId;
|
|
|
+ // });
|
|
|
+ // console.log(subtotal.value);
|
|
|
+ }
|
|
|
|
|
|
- .btns {
|
|
|
- display: flex;
|
|
|
- gap: 10px;
|
|
|
- }
|
|
|
}
|
|
|
|
|
|
-/* 表格容器:铺满剩余高度 */
|
|
|
-.table-container {
|
|
|
- flex: 1; /* 关键:占据父容器剩余所有空间 */
|
|
|
- min-height: 300px; /* 最小高度,确保表格可视 */
|
|
|
- overflow: hidden; /* 隐藏容器自身滚动条 */
|
|
|
- position: relative; /* 解决 loading 定位问题 */
|
|
|
+// 页码变化
|
|
|
+async function onPageSizeChange(size: number) {
|
|
|
+ // 每页条数改变函数
|
|
|
+ // pageSize.value = size;
|
|
|
+ // pageNum.value = 1;
|
|
|
+ systemStore.pageInfo.pageSize = size;
|
|
|
+ systemStore.pageInfo.pageNum = 1;
|
|
|
+ // 控制是否清空所选项
|
|
|
+ clearFlag.value = false;
|
|
|
+ await fetchPageListData();
|
|
|
+ // 恢复选中状态
|
|
|
+ // await echoWay();
|
|
|
}
|
|
|
-
|
|
|
-/* 表格样式调整 */
|
|
|
-.el-table {
|
|
|
- width: 100% !important;
|
|
|
- height: 100% !important; /* 表格高度铺满容器 */
|
|
|
- max-height: none !important; /* 移除原有最大高度限制 */
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
+async function onPageChange(current: number) {
|
|
|
+ // 页码改变函数
|
|
|
+ systemStore.pageInfo.pageNum = current;
|
|
|
+ systemStore.pageInfo.pageNum = current;
|
|
|
+ // 控制是否清空所选项
|
|
|
+ clearFlag.value = false;
|
|
|
+ await fetchPageListData();
|
|
|
+ // 恢复选中状态
|
|
|
+ // await echoWay();
|
|
|
}
|
|
|
+watch(
|
|
|
+ () => sharedValueStore.pageNum,
|
|
|
+ (newVal, oldVal) => {
|
|
|
+ // pageNum.value = 1;
|
|
|
+ systemStore.pageInfo.pageNum = 1;
|
|
|
+ },
|
|
|
+ { deep: true }
|
|
|
+);
|
|
|
+// 暴露函数
|
|
|
+defineExpose({
|
|
|
+ clearSelection,
|
|
|
+ fetchPageListData,
|
|
|
+});
|
|
|
+</script>
|
|
|
|
|
|
-/* 表头样式 */
|
|
|
-.el-table__header-wrapper {
|
|
|
- flex-shrink: 0; /* 表头不收缩 */
|
|
|
- background-color: #f5f7fa; /* 表头背景色(可选) */
|
|
|
-}
|
|
|
+<style scoped lang="scss">
|
|
|
+.contenBox {
|
|
|
+ padding: 15px 20px 20px 20px;
|
|
|
+ margin-top: 20px;
|
|
|
+ background-color: #fff;
|
|
|
|
|
|
-/* 表体样式:内容超出时滚动 */
|
|
|
-.el-table__body-wrapper {
|
|
|
- flex: 1; /* 表体占据剩余空间 */
|
|
|
- overflow-y: auto !important; /* 垂直滚动 */
|
|
|
- overflow-x: auto !important; /* 水平滚动(内容过宽时) */
|
|
|
-}
|
|
|
+ .table-action {
|
|
|
+ margin-bottom: 15px;
|
|
|
|
|
|
-/* 修复固定列高度问题 */
|
|
|
-.el-table__fixed, .el-table__fixed-right {
|
|
|
- height: 100% !important;
|
|
|
-}
|
|
|
-.el-table__fixed-body-wrapper, .el-table__fixed-right-body-wrapper {
|
|
|
- height: calc(100% - 41px) !important; /* 固定列表体高度(减去表头高度) */
|
|
|
+ button {
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .ivu-table-header thead tr th {
|
|
|
+ background-color: #f0f9fe;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
-/* 其他原有样式 */
|
|
|
-/* ...(保留原有其他样式,如 customList、itemName 等)... */
|
|
|
.customList {
|
|
|
- color: #606266;
|
|
|
- font-weight: 700;
|
|
|
+ color: #606266;
|
|
|
+ font-weight: 700;
|
|
|
}
|
|
|
|
|
|
.itemName {
|
|
|
- margin: 0 10px 5px 10px;
|
|
|
+ margin: 0 10px 5px 10px;
|
|
|
}
|
|
|
|
|
|
.energyClass {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- flex-wrap: wrap;
|
|
|
- flex: 1;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ flex: 1;
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|