✨feat:添加电脑管理

src/utils/useElTable.ts

@@ -0,0 +1,28 @@
+/**
+ * 获取 El-Table的数据并处理total和loading
+ * @param apiFunction 请求的接口函数
+ * @param query 请求参数
+ * @param tableData El-Table的数据
+ * @param total El-Table数据的总条数
+ * @param loading El-Table的loading状态
+ */
+export async function useElTableData(apiFunction: Function, query: any, tableData: Ref<any[]>, total: Ref<number>, loading: Ref<boolean>) {
+  try {
+    loading.value = true;
+    const response = await apiFunction(query);
+    let responseData = response.data;
+    if (!Array.isArray(responseData)) {
+      responseData = [ responseData ];
+    }
+    total.value = response.total;
+    tableData.value = responseData;
+    return { success: true, data: responseData, code: response.code, msg: response.msg };
+  } catch (error) {
+    console.error('Error in useElTableData==> ', error);
+    return { success: false, error };
+  } finally {
+    loading.value = false;
+    await nextTick();
+    window.dispatchEvent(new Event('resize'));
+  }
+}

src/utils/usePagination.ts

@@ -0,0 +1,29 @@
+/**
+ * 分页改变获取数据
+ * @param getData 获取数据的方法, 在调用的文件处完成getData方法的实现后传入
+ */
+export function usePagination(getData: Function) {
+  const tableData = ref([]);
+  const total = ref(0);
+  const currentPage = ref(1);
+  const pageSize = ref(10);
+
+  /**
+   * 分页改变
+   * @param newPage 当前页码
+   * @param newSize 每页条数
+   */
+  async function handlePageChange(newPage: number, newSize: number) {
+    currentPage.value = newPage;
+    pageSize.value = newSize;
+    await getData();
+  }
+
+  return {
+    tableData,
+    total,
+    currentPage,
+    pageSize,
+    handlePageChange
+  };
+}

src/views/computer-information/api.ts

@@ -0,0 +1,13 @@
+import { request } from '/@/utils/service';
+
+
+const apiPrefix = '/api/assets/computer/';
+
+export function getCardData(query: any) {
+  return request({
+    url: apiPrefix + 'card/',
+    method: 'GET',
+    params: query,
+  });
+}
+

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

@@ -0,0 +1,94 @@
+<script setup lang="ts">/**
+ * @Name: ComputerDetail.vue
+ * @Description: 电脑信息-当前
+ * @Author: xinyan
+ */
+import { ComputerColumns } from '/@/views/computer-information/useColumns';
+
+const gridOptions: any = reactive({
+  border: 'inner',
+  round: true,
+  stripe: true,
+  currentRowHighLight: true,
+  height: 870,
+  toolbarConfig: {
+    custom: true,
+    slots: {
+      buttons: 'toolbar_buttons'
+      // tools: 'toolbar_tools'
+    }
+  },
+  rowConfig: {
+    isHover: true
+  },
+  columnConfig: {
+    resizable: true
+  },
+  pagerConfig: {
+    total: 0,
+    page: 1,
+    limit: 10
+  },
+  loading: false,
+  loadingConfig: {
+    icon: 'vxe-icon-indicator roll',
+    text: '正在拼命加载中...'
+  },
+  columns: ComputerColumns,
+  data: []
+});
+</script>
+
+<template>
+  <div class="p-2.5">
+    <!-- overview-card -->
+    <el-card body-class="flex items-center" shadow="hover" style="border: none">
+      <el-image :src="`https://via.placeholder.com/150`" 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-col :span="18">
+        <div class="info-container">
+          <div class="info-column">
+            <div class="font-semibold">电脑编号:</div>
+            <div class="font-semibold">所属部门:</div>
+            <div class="font-semibold">工位号:</div>
+            <div class="font-semibold">IP地址:</div>
+          </div>
+          <div class="info-column">
+            <div class="font-semibold">电脑名称:</div>
+            <div class="font-semibold">使用人:</div>
+            <div class="font-semibold">电脑类型:</div>
+            <div class="font-semibold">MAC地址:</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 v-bind="gridOptions">
+      </vxe-grid>
+    </el-card>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.info-container {
+  display: flex;
+  justify-content: space-between;
+}
+
+.info-column {
+  flex: 1;
+  padding: 0 10px;
+}
+
+p {
+  margin: 5px 0;
+}
+</style>

src/views/computer-information/components/EditComputerInfo.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">/**
+ * @Name: EditComputerInfo.vue
+ * @Description: 编辑电脑信息
+ * @Author: xinyan
+ */
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/views/computer-information/components/InfoCard.vue

@@ -0,0 +1,152 @@
+<script lang="ts" setup>
+/**
+ * @Name: InfoCard.vue
+ * @Description: 电脑信息卡片
+ * @Author: xinyan
+ */
+
+import { ref } from 'vue';
+import { ElIcon, ElMessage } from 'element-plus';
+import { Delete, EditPen, Picture as IconPicture, Search } from '@element-plus/icons-vue';
+import { useResponse } from '/@/utils/useResponse';
+import * as api from '/@/views/computer-information/api';
+import { useRouter } from 'vue-router';
+import { usePagination } from '/@/utils/usePagination';
+import { useElTableData } from '/@/utils/useElTable';
+
+const router = useRouter();
+const cardItems = ref([]);
+const loading = ref();
+const { tableData, currentPage, pageSize ,total } = usePagination(fetchCardData)
+
+// 分页参数
+// const currentPage = ref(1);
+// const pageSize = ref(10);
+// const total = ref(0);
+
+async function fetchCardData() {
+  const query = {
+    page: currentPage.value,
+    limit: pageSize.value,
+  };
+  await useElTableData(api.getCardData, query, tableData, total, loading)
+	// const res = await useResponse(query, api.getCardData, loading);
+  // tableData.value = res.data;
+  // total.value = res.total;
+  // currentPage.value = res.page;
+  // pageSize.value = res.limit;
+}
+
+// 编辑和删除的事件处理
+const editItem = (item) => {
+	router.push({
+    path: '/computer/edit',
+    query: { computerNumber: item.computerNumber }
+  })
+};
+
+const deleteItem = (item) => {
+	ElMessage({
+		message: `删除 ${item.computerNumber}`,
+		type: 'warning',
+	});
+};
+
+// 处理图片地址
+const getImageUrl = (images) => {
+	// 如果有图片，返回第一个图片的 image_url，否则返回占位图
+	return images.length > 0 ? images[0].image_url : 'https://via.placeholder.com/150';
+};
+
+onMounted(() => {
+  fetchCardData();
+});
+</script>
+
+<template>
+		<!-- 卡片展示区域 -->
+		<div class="card-container">
+			<el-row :gutter="20">
+				<el-col v-for="(item, index) in tableData" :key="index" :span="4" class="my-2.5">
+					<el-card class="item-card" shadow="hover">
+						<el-image :src="getImageUrl(item.images)" alt="电脑图片" class="card-image">
+							<template #error>
+								<el-icon class="card-image" style="font-size: 4rem">
+									<icon-picture />
+								</el-icon>
+							</template>
+						</el-image>
+						<div class="card-content">
+							<div>
+								<span style="color: #808d97">电脑编号: </span>
+								<span>{{ item.computerNumber }}</span>
+							</div>
+							<div>
+								<span style="color: #808d97">所属店铺: </span>
+								<span>{{ item.shopName }}</span>
+							</div>
+						</div>
+						<div class="card-footer">
+              <el-button :icon="Search" circle type="primary" @click="editItem(item)" />
+							<el-button :icon="EditPen" circle type="primary" @click="editItem(item)" />
+							<el-button :icon="Delete" circle type="danger" @click="deleteItem(item)" />
+						</div>
+					</el-card>
+				</el-col>
+			</el-row>
+		</div>
+    <div class="pagination-container">
+      <!--<el-pagination-->
+      <!--    v-model:current-page="currentPage"-->
+      <!--    :page-size="pageSize"-->
+      <!--    :page-sizes="[10, 25, 50,100,200]"-->
+      <!--    :total="total"-->
+      <!--    background-->
+      <!--    layout="total,sizes,prev, next, jumper"-->
+      <!--    small-->
+      <!--/>-->
+      <el-pagination
+          v-model:current-page="currentPage"
+          v-model:page-size="pageSize"
+          :page-sizes="[10, 20, 30, 50, 100, 200]"
+          :total="total"
+          layout="sizes, prev, pager, next, total"
+          background
+          @change="handlePageChange"/>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.card-container {
+	margin-bottom: 20px;
+}
+
+.item-card {
+	border-radius: 10px;
+	overflow: hidden;
+	position: relative;
+}
+
+.card-image {
+	width: 100%;
+	height: 150px;
+	object-fit: cover;
+}
+
+.card-content {
+	padding: 10px;
+	font-size: 14px;
+}
+
+.card-footer {
+	display: flex;
+	justify-content: flex-end;
+	padding: 10px;
+}
+
+.pagination-container {
+  display: flex;
+  justify-content: flex-end;
+  // margin-bottom: 20px;
+}
+</style>

src/views/computer-information/index.vue

@@ -1,14 +1,18 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 /**
  * @Name: index.vue
  * @Description: 电脑信息页面
- * @Author: Cheney
+ * @Author: xinyan
  */
 
+import InfoCard from '/@/views/computer-information/components/InfoCard.vue';
+
 </script>
 
 <template>
-
+	<div class="px-5 py-5">
+		<InfoCard />
+	</div>
 </template>
 
 <style scoped>

src/views/computer-information/useColumns.tsx

@@ -0,0 +1,8 @@
+export const ComputerColumns = [
+  { field: 'platformNumber', title: '平台编号'},
+  { field: 'platform', title: '平台'},
+  { field: 'platformName', title: '平台名称'},
+  { field: 'country', title: '区域'},
+  { field: 'userName', title: '使用人'},
+  { field: 'company', title: '所属公司'},
+];