🎨 feat:电脑信息界面修改

src/views/computer-information/api.ts

@@ -33,3 +33,11 @@ export function getPastTableData(query: any) {
   });
 }
 
+export function createComputer(body: any) {
+  return request({
+    url: apiPrefix + 'create/',
+    method: 'POST',
+    data: body,
+  });
+}
+

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

@@ -5,7 +5,7 @@
  * @Author: xinyan
  */
 import { useResponse } from '/@/utils/useResponse';
-import { ComputerColumns } from '/@/views/computer-information/useColumns';
+import { ComputerCurrentColumns, ComputerPastColumns } from '/@/views/computer-information/useColumns';
 import * as api from '../api';
 import { Picture as IconPicture } from '@element-plus/icons-vue';
 import { useTableData } from '/@/utils/useTableData';
@@ -13,9 +13,10 @@ import { usePagination } from '/@/utils/usePagination';
 
 const route = useRoute();
 const id = route.query.id;
+const computerNumber = route.query.computerNumber;
 const computerOverview: any = ref([]);
 const overviewLoading = ref();
-const currentView = ref('history');
+const currentView = ref('current');
 const { tableOptions, handlePageChange } = usePagination(fetchComputerData);
 
 const gridOptions: any = reactive({
@@ -47,7 +48,7 @@ const gridOptions: any = reactive({
 		icon: 'vxe-icon-indicator roll',
 		text: '正在拼命加载中...',
 	},
-	columns: ComputerColumns,
+	columns: ComputerCurrentColumns,
 	data: [],
 });
 
@@ -58,27 +59,32 @@ function pageChange({ pageSize, currentPage }: any) {
 }
 
 // 当前信息、历史记录
-async function fetchComputerData(view) {
-	if (view === currentView.value) {
-		return;
-	}
+async function fetchComputerData(view) { // 默认为当前视图
+  const query = {
+    page: gridOptions.pagerConfig.page,
+    limit: gridOptions.pagerConfig.limit,
+  };
 
-	const query = {
-		id: id,
-		page: gridOptions.pagerConfig.page,
-		limit: gridOptions.pagerConfig.limit,
-	};
+  switch (view) {
+    case 'current':
+      gridOptions.columns = ComputerCurrentColumns;
+      currentView.value = 'current';
+      query.computerNumber = computerNumber;
+      await useTableData(api.getCurrentTableData, query, gridOptions);
+      break;
+    case 'history':
+      gridOptions.columns = ComputerPastColumns;
+      currentView.value = 'history';
+      query.id = id;
+      await useTableData(api.getPastTableData, query, gridOptions);
+      break;
+  }
+}
 
-	switch (view) {
-		case 'current':
-			currentView.value = 'current';
-			await useTableData(api.getCurrentTableData, query, gridOptions);
-			break;
-		case 'history':
-			currentView.value = 'history';
-			await useTableData(api.getPastTableData, query, gridOptions);
-			break;
-	}
+function switchView(view) {
+  if (view !== currentView.value) { // 只有在不同的视图时才切换
+    fetchComputerData(view); // 调用 fetchComputerData 来加载新的视图数据
+  }
 }
 
 async function fetchComputerDetailOverview() {
@@ -108,7 +114,7 @@ const headerCellStyle = () => {
 };
 
 onMounted(() => {
-	fetchComputerData();
+	fetchComputerData(currentView.value);
 	fetchComputerDetailOverview();
 });
 </script>
@@ -167,8 +173,8 @@ onMounted(() => {
 		<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">
 				<template #toolbar_buttons>
-					<el-button :type="currentView === 'current' ? 'primary' : 'default'" @click="fetchComputerData('current')"> 当前信息 </el-button>
-					<el-button :type="currentView === 'history' ? 'primary' : 'default'" @click="fetchComputerData('history')"> 历史记录 </el-button>
+					<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>
 				<template #pager>
 					<vxe-pager

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

@@ -0,0 +1,159 @@
+<script lang="ts" setup>
+/**
+ * @Name: CreateComputer.vue
+ * @Description:
+ * @Author: xinyan
+ */
+import { ElMessage, FormInstance, FormRules } from 'element-plus';
+import { useResponse } from '/@/utils/useResponse';
+import * as api from '../api';
+
+const showDialog = defineModel({ default: false });
+
+// 图片处理
+const upload = ref<UploadInstance>();
+// 表单数据
+interface RuleForm {
+  computerNumber: string;
+  computerType: string;
+  station: string;
+  shop: string;
+  user: string;
+  macaddress: string;
+  ipaddress: string;
+  images: UploadFile[];
+}
+const ruleFormRef = ref<FormInstance>();
+const formData = reactive<RuleForm>({
+	computerNumber: '',
+	computerType: '',
+	station: '',
+	shop: '',
+	user: '',
+	macaddress: '',
+	ipaddress: '',
+	images: [],
+});
+
+const rules = reactive<FormRules<RuleForm>>({
+	computerNumber: [{ required: true, message: '请输入电脑编号', trigger: 'blur' }],
+	computerType: [{ required: true, message: '请输入电脑类型', trigger: 'blur' }],
+	station: [{ required: true, message: '请输入所在站点', trigger: 'blur' }],
+	shop: [{ required: true, message: '请输入所属商铺', trigger: 'blur' }],
+	user: [{ required: true, message: '请输入使用者', trigger: 'blur' }],
+	macaddress: [{ required: true, message: '请输入MAC地址', trigger: 'blur' }],
+	ipaddress: [{ required: true, message: '请输入IP地址', trigger: 'blur' }],
+});
+
+// 表单字段配置
+const formFields = [
+	{ label: '电脑编号：', key: 'computerNumber'},
+	{ label: '电脑类型：', key: 'computerType'},
+	{ label: '工位号：', key: 'station'},
+	{ label: '所属店铺：', key: 'shop'},
+	{ label: '电脑使用人：', key: 'user'},
+	{ label: 'MAC地址：', key: 'macaddress'},
+	{ label: '使用IP地址：', key: 'ipaddress'},
+];
+const shopOptions = [
+	{
+		value: 'shop1',
+		label: '店铺一',
+	},
+	{
+		value: 'shop2',
+		label: '店铺二',
+	},
+];
+
+// 超过图片限制时触发的回调
+const handleExceed: UploadProps['onExceed'] = (files) => {
+	upload.value!.clearFiles();
+	const file = files[0] as UploadRawFile;
+	file.uid = genFileId();
+	upload.value!.handleStart(file);
+};
+
+const submitForm = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      handleSave();
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+
+// 保存操作
+async function handleSave () {
+	const body = {
+		computerNumber: formData.computerNumber,
+		computerType: formData.computerType,
+		station: formData.station,
+		shop: formData.shop,
+		user: formData.user,
+		macaddress: formData.macaddress,
+		ipaddress: formData.ipaddress,
+		images: formData.images,
+	};
+  await useResponse(body, api.createComputer);
+  console.log("=>(CreateComputer.vue:94) body", body);
+}
+
+// 取消操作
+const handleCancel = () => {
+	router.push({
+		path: '/computer',
+	});
+};
+</script>
+
+<template>
+	<el-dialog v-model="showDialog" :close-on-click-modal="false" title="新增电脑信息" width="35%">
+		<el-form
+        ref="ruleFormRef"
+        :model="formData"
+        :rules="rules"
+        class="computer-info-form"
+        label-width="auto"
+        status-icon>
+			<el-form-item v-for="field in formFields" :label="field.label" :prop="field.key">
+				<el-select v-if="field.key === 'shop'" v-model="formData[field.key]" placeholder="请选择店铺">
+					<el-option v-for="shop in shopOptions" :key="shop.value" :label="shop.label" :value="shop.value" />
+				</el-select>
+				<el-input v-else v-model="formData[field.key]" />
+			</el-form-item>
+			<!-- 电脑图片上传 -->
+			<el-form-item :key="images" label="电脑图片：">
+				<el-upload
+					ref="upload"
+					v-model:file-list="formData.images"
+					:auto-upload="false"
+					:limit="1"
+					:on-exceed="handleExceed"
+					action="#"
+					list-type="picture-card"
+				>
+					<el-icon>
+						<Plus />
+					</el-icon>
+				</el-upload>
+			</el-form-item>
+		</el-form>
+		<template #footer>
+			<div class="dialog-footer">
+				<el-button type="primary" @click="submitForm(ruleFormRef)">保存</el-button>
+				<el-button @click="handleCancel">取消</el-button>
+			</div>
+		</template>
+	</el-dialog>
+</template>
+
+<style scoped>
+.dialog-footer {
+	margin-bottom: 10px;
+	text-align: center;
+}
+</style>

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

@@ -28,7 +28,10 @@ async function fetchCardData() {
 const checkItem = (item) => {
 	router.push({
 		path: '/computer/detail',
-		query: { id: item.id },
+		query: {
+			id: item.id,
+			computerNumber: item.computerNumber,
+		},
 	});
 };
 
@@ -60,7 +63,7 @@ onMounted(() => {
 
 <template>
 	<!-- 卡片展示区域 -->
-	<el-card shadow="never" style="border: none; min-height: 850px; position: relative;">
+	<el-card shadow="never" style="border: none; min-height: 750px; position: relative;">
 		<div class="card-container">
 			<el-row :gutter="20">
 				<el-col v-for="(item, index) in tableOptions.data" :key="index" :span="4" class="my-2.5">
@@ -74,18 +77,18 @@ onMounted(() => {
 						</el-image>
 						<div class="card-content">
 							<div>
-								<span style="color: #808d97">电脑编号: </span>
-								<span>{{ item.computerNumber }}</span>
+								<span style="color: #808d97;font-weight: 500">电脑编号: </span>
+								<span style="font-weight: 500">{{ item.computerNumber }}</span>
 							</div>
 							<div>
-								<span style="color: #808d97">所属店铺: </span>
-								<span>{{ item.shopName }}</span>
+								<span style="color: #808d97;font-weight: 500">所属店铺: </span>
+								<span style="font-weight: 500">{{ item.shopName }}</span>
 							</div>
 						</div>
 						<div class="card-footer">
-							<el-button :icon="Search" circle type="primary" @click="checkItem(item)" />
-							<el-button :icon="EditPen" circle type="warning" @click="editItem(item)" />
-							<el-button :icon="Delete" circle type="danger" @click="deleteItem(item)" />
+							<el-button :icon="Search" circle text bg type="primary" @click="checkItem(item)" />
+							<el-button :icon="EditPen" circle text bg type="warning" @click="editItem(item)" />
+							<el-button :icon="Delete" circle text bg type="danger" @click="deleteItem(item)" />
 						</div>
 					</el-card>
 				</el-col>
@@ -95,7 +98,7 @@ onMounted(() => {
 			<el-pagination
 				v-model:current-page="tableOptions.page"
 				v-model:page-size="tableOptions.limit"
-				:page-sizes="[5, 10, 25, 50, 100, 200]"
+				:page-sizes="[6, 12, 24,36,48,60]"
 				:total="tableOptions.total"
 				background
 				layout="sizes, prev, pager, next, total"
@@ -130,7 +133,7 @@ onMounted(() => {
 .card-footer {
 	display: flex;
 	justify-content: flex-end;
-	padding: 10px;
+	// padding: 10px;
 }
 
 .pagination-container {

src/views/computer-information/index.vue

@@ -6,11 +6,34 @@
  */
 
 import InfoCard from '/@/views/computer-information/components/InfoCard.vue';
+import { Plus } from '@element-plus/icons-vue';
+import CreateComputer from '/@/views/computer-information/components/CreateComputer.vue';
+
+// 创建弹窗
+const showDialog = ref(false);
+
+// 打开创建弹窗
+async function addComputer() {
+  showDialog.value = true;
+}
+
 </script>
 
 <template>
-	<div class="px-5 py-5">
+	<div class="px-2.5">
+    <el-card class="my-2.5" shadow="never" style="border: none;">
+      <div class="flex justify-between items-baseline">
+        <div>
+          <span class="font-bold text-xl">电脑信息概览</span>
+          <el-divider class=" text-3xl" direction="vertical"/>
+        </div>
+        <span>
+           <el-button :icon="Plus" plain type="primary" @click="addComputer">添 加</el-button>
+        </span>
+      </div>
+    </el-card>
 			<InfoCard />
+    <CreateComputer v-model="showDialog"></CreateComputer>
 	</div>
 </template>
 

src/views/computer-information/useColumns.tsx

@@ -1,8 +1,19 @@
-export const ComputerColumns = [
+export const ComputerCurrentColumns = [
   { field: 'platformNumber', title: '平台编号'},
   { field: 'platform', title: '平台'},
   { field: 'platformName', title: '平台名称'},
   { field: 'country', title: '区域'},
   { field: 'userName', title: '使用人'},
   { field: 'company', title: '所属公司'},
-];
+];
+
+export const ComputerPastColumns =[
+  { field: 'create_datetime', title: '时间'},
+  { field: 'station', title: '工位号'},
+  { field: 'computerNumber', title: '平台编号'},
+  { field: 'platform', title: '平台'},
+  { field: 'platformName', title: '平台名称'},
+  { field: 'company', title: '区域'},
+  { field: 'userName', title: '使用人'},
+  { field: 'ipaddress', title: 'IP地址'},
+]