ams_web/src/views/computer-information/components/ComputerDetail.vue

<script lang="ts" setup>
/**
 * @Name: ComputerDetail.vue
 * @Description: 电脑信息-当前
 * @Author: xinyan
 */
import { useResponse } from '/@/utils/useResponse';
import { ComputerCurrentColumns, ComputerPastColumns } from '/@/views/computer-information/useColumns';
import * as api from '../api';
import { Edit, Picture as IconPicture } from '@element-plus/icons-vue';
import { useTableData } from '/@/utils/useTableData';
import { usePagination } from '/@/utils/usePagination';
import EditComputerInfo from '/@/views/computer-information/components/EditComputerInfo.vue';
import { ref } from 'vue';
import { getCurrentTableData, getPastTableData } from '../api';

const route = useRoute();
const id = route.query.id;
// const computerNumber = route.query.computerNumber;
const computerOverview: any = ref([]);
const overviewLoading = ref();
const isDrawerVisible = ref(false);

const shopOptions = ref([]);
const userOptions = ref([]);

const currentView = ref('current');
// const { tableOptions, handlePageChange } = usePagination(fetchComputerData);

const gridOptions: any = reactive({
	border: 'inner',
	round: true,
	stripe: true,
	currentRowHighLight: true,
	height: 700,
	toolbarConfig: {
		custom: true,
		slots: {
			buttons: 'toolbar_buttons',
			// tools: 'toolbar_tools'
		},
	},
	rowConfig: {
		isHover: true,
	},
	columnConfig: {
		resizable: true,
	},
	pagerConfig: {
		total: 0,
    currentPage: 1,
    pageSize: 20,
	},
	loading: false,
	loadingConfig: {
		icon: 'vxe-icon-indicator roll',
		text: '正在拼命加载中...',
	},
	columns: ComputerCurrentColumns,
	data: [],
});

async function editItem() {
  isDrawerVisible.value = true; // 显示 Drawer
}

async function fetchComputerDetailOverview() {
  const res = await useResponse(id, api.getComputerDetailOverview, overviewLoading);
  computerOverview.value = res.data;
}

const gridEvents = {
  pageChange({ currentPage, pageSize }) {
    console.log("=>(ComputerDetail.vue:73) pageSize", pageSize);
    console.log("=>(ComputerDetail.vue:73) currentPage", currentPage);
    if (gridOptions.pagerConfig) {
      gridOptions.pagerConfig.currentPage = currentPage;
      gridOptions.pagerConfig.pageSize = pageSize;
      fetchComputerData(currentView.value);
    }
  }
};

// 当前信息、历史记录
async function fetchComputerData(view) { // 默认为当前视图
  const query = {
    page: gridOptions.pagerConfig.currentPage,
    limit: gridOptions.pagerConfig.pageSize,
    computerNumber : computerOverview.value.computerNumber,
  };

  switch (view) {
    case 'current':
      gridOptions.columns = ComputerCurrentColumns;
      currentView.value = 'current';
      const resp = await getCurrentTableData(query);
      gridOptions.data = resp.data;
      gridOptions.pagerConfig.total = resp.total;
      // await useTableData(api.getCurrentTableData, query, gridOptions);
      break;
    case 'history':
      gridOptions.columns = ComputerPastColumns;
      currentView.value = 'history';
      query.id = id;
      // await useTableData(api.getPastTableData, query, gridOptions);
      const ret = await getPastTableData(query);
      gridOptions.data = ret.data;
      gridOptions.pagerConfig.total = ret.total;
      break;
  }
}

function switchView(view) {
  if (view !== currentView.value) {
    gridOptions.pagerConfig.currentPage = 1;
    gridOptions.pagerConfig.pageSize = 20;
    fetchComputerData(view);
  }
}

function handleRefresh() {
  fetchComputerDetailOverview();
  fetchComputerData()
}

async function fetchShopOptions() {
  try {
    const resp = await useResponse(null, api.getShopList);
    shopOptions.value = resp.data.map((item: any) => {
      return { value: item.id, label: item.platformNumber };
    });
  } catch (e) {
    console.log('error', e);
  }
}

async function fetchUserOptions() {
  try {
    const resp = await useResponse(null, api.getUserList);
    userOptions.value = resp.data.map((item: any) => {
      return { value: item.id, label: item.name };
    });
  } catch (e) {
    console.log('error', e);
  }
}

const getImageSrc = () => {
	// 如果 `images` 有值，则返回第一张图片的 URL；否则返回占位图
	return computerOverview.value.images && computerOverview.value.images.length > 0
		? computerOverview.value.images[0].image_url
		: 'https://via.placeholder.com/150';
};

// 表格样式
const cellStyle = () => {
	return {
		fontSize: '12px',
		fontWeight: '600',
	};
};

const headerCellStyle = () => {
	return {
		fontSize: '12px',
	};
};

onMounted(async () => {
  await fetchComputerDetailOverview(); // 等待获取详情
  await fetchComputerData(currentView.value); // 获取电脑数据
  await fetchShopOptions(); // 获取店铺选项
  await fetchUserOptions(); // 获取用户选项
});
</script>

<template>
	<div class="p-2.5">
		<!-- overview-card -->
		<el-card v-loading="overviewLoading" body-class="flex items-center" shadow="hover" style="border: none">
			<el-image :src="getImageSrc()" class="mr-7 rounded-2xl" style="height: 100px; width: 100px; object-fit: contain">
				<template #error>
					<div class="mr-3.5 flex items-center justify-center text-5xl" style="height: 100px; width: 100px; background-color: #f5f5f5">
						<el-icon>
							<icon-picture />
						</el-icon>
					</div>
				</template>
			</el-image>
      <el-button :icon="Edit" link type="warning" @click="editItem"></el-button>
			<el-col :span="18">
				<div class="info-container text-lg">
					<div class="info-column">
						<div class="font-semibold">
							电脑编号:
							<span class="font-medium italic ml-1.5" style="color: #64748b">{{ computerOverview.computerNumber }}</span>
						</div>
						<div class="font-semibold">
							所属店铺:
							<span class="font-medium italic ml-1.5" style="color: #64748b">{{ computerOverview.platformNumber }}</span>
						</div>
						<div class="font-semibold">
							工位号:
							<span class="font-medium italic ml-1.5" style="color: #64748b">{{ computerOverview.station }}</span>
						</div>
						<div class="font-semibold">
							IP地址:
							<span class="font-medium italic ml-1.5" style="color: #64748b">{{ computerOverview.ipaddress }}</span>
						</div>
					</div>
					<div class="info-column">
						<div class="font-semibold">
							使用人:
							<span class="font-medium italic ml-1.5" style="color: #64748b">{{ computerOverview.userName }}</span>
						</div>
						<div class="font-semibold">
							电脑类型:
							<span class="font-medium italic ml-1.5" style="color: #64748b">{{ computerOverview.computerType }}</span>
						</div>
						<div class="font-semibold">
							MAC地址:
							<span class="font-medium italic ml-1.5" style="color: #64748b">{{ computerOverview.macaddress }}</span>
						</div>
					</div>
				</div>
			</el-col>
		</el-card>
		<!-- table-card -->
		<el-card body-style="padding-top: 10px" class="mt-2.5" shadow="hover" style="border: none">
			<vxe-grid :cell-style="cellStyle" :header-cell-style="headerCellStyle" v-bind="gridOptions" v-on="gridEvents">
				<template #toolbar_buttons>
					<el-button :type="currentView === 'current' ? 'primary' : 'default'" @click="switchView('current')"> 当前信息 </el-button>
					<el-button :type="currentView === 'history' ? 'primary' : 'default'" @click="switchView('history')"> 历史记录 </el-button>
				</template>
			</vxe-grid>
		</el-card>
    <!-- 编辑 Drawer -->
    <EditComputerInfo
    	v-if="isDrawerVisible"
    	v-model="isDrawerVisible"
    	:computerOverview
    	:computerNumber="computerOverview.computerNumber"
    	:shopOptions="shopOptions"
    	:userOptions="userOptions"
    	@refresh="handleRefresh"
    />
	</div>
</template>

<style lang="scss" scoped>
.info-container {
	display: flex;
	justify-content: space-between;
}

.info-column {
	flex: 1;
	padding: 0 10px;
}

p {
	margin: 5px 0;
}
</style>