完成Banner,设备管理模块，进行中 水电表

src/views/system/equipment/Archive/index.vue

@@ -1,12 +1,11 @@
 <template>
-  <div class="p-2">
+  <div class="flex flex-col h-full p-2">
+    <pageheader></pageheader>
+
     <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
       <div v-show="showSearch" class="mb-[10px]">
         <el-card shadow="hover">
           <el-form ref="queryFormRef" :model="queryParams" :inline="true">
-            <el-form-item label="设备分类ID" prop="categoryId">
-              <el-input v-model="queryParams.categoryId" placeholder="请输入设备分类ID" clearable @keyup.enter="handleQuery" />
-            </el-form-item>
             <el-form-item label="设备名称" prop="deviceName">
               <el-input v-model="queryParams.deviceName" placeholder="请输入设备名称" clearable @keyup.enter="handleQuery" />
             </el-form-item>
@@ -22,7 +21,7 @@
       </div>
     </transition>
 
-    <el-card shadow="never">
+    <el-card class="flex-1" shadow="never">
       <template #header>
         <el-row :gutter="10" class="mb8">
           <el-col :span="1.5">
@@ -41,25 +40,25 @@
           <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
         </el-row>
       </template>
-
       <el-table v-loading="loading" border :data="deviceList" @selection-change="handleSelectionChange">
         <el-table-column type="selection" width="55" align="center" />
-        <el-table-column label="设备分类" align="center" prop="categoryId" />
+        <el-table-column label="设备分类" align="center" prop="categoryName" />
         <el-table-column label="设备名称" align="center" prop="deviceName" />
         <el-table-column label="设备编号" align="center" prop="deviceCode" />
         <el-table-column label="设备型号" align="center" prop="deviceModel" />
-        <el-table-column label="位置区域" align="center" prop="area" />
-        <el-table-column label="维护人员" align="center" prop="maintainUserIds" />
-        <el-table-column label="设备状态 0正常 1异常" align="center" prop="status" />
-        <el-table-column label="备注" align="center" prop="remark" />
+        <el-table-column label="位置区域" align="center" prop="area" show-overflow-tooltip />
+        <el-table-column label="维护人员" align="center" prop="maintainUserListName" show-overflow-tooltip />
+        <el-table-column label="设备状态" width="80" align="center" prop="status">
+          <template #default="scope">
+            <dict-tag :options="com_equipment_archive_status" :value="scope.row.status"></dict-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="备注" align="center" prop="remark" show-overflow-tooltip />
         <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width">
           <template #default="scope">
-            <el-tooltip content="修改" placement="top">
-              <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:device:edit']"></el-button>
-            </el-tooltip>
-            <el-tooltip content="删除" placement="top">
-              <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:device:remove']"></el-button>
-            </el-tooltip>
+            <el-button link type="primary" @click="handleMain(scope.row)">查看详情</el-button>
+            <el-button link type="primary" @click="handleUpdate(scope.row)" v-hasPermi="['system:device:edit']">修改</el-button>
+            <el-button link type="primary" @click="handleDelete(scope.row)" v-hasPermi="['system:device:remove']">删除</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -74,8 +73,12 @@ import { listDevice, getDevice, delDevice, addDevice, updateDevice } from '@/api
 import { DeviceVO, DeviceQuery, DeviceForm } from '@/api/system/equipment/archive/type';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const { com_equipment_archive_status } = toRefs<any>(proxy?.useDict('com_equipment_archive_status'));
 
-const deviceList = ref<DeviceVO[]>([]);
+interface tableType extends DeviceVO {
+  maintainUserListName?: string;
+}
+const deviceList = ref<tableType[]>([]);
 const buttonLoading = ref(false);
 const loading = ref(true);
 const showSearch = ref(true);
@@ -131,6 +134,14 @@ const getList = async () => {
   loading.value = true;
   const res = await listDevice(queryParams.value);
   deviceList.value = res.rows;
+  deviceList.value.forEach((item) => {
+    if (item.maintainUserList && item.maintainUserList.length > 0) {
+      item.maintainUserListName = item.maintainUserList
+        .map((it) => (it.nickName ? it.nickName : null))
+        .filter((it) => it !== null)
+        .join(',');
+    }
+  });
   total.value = res.total;
   loading.value = false;
 };
@@ -165,22 +176,31 @@ const handleSelectionChange = (selection: DeviceVO[]) => {
   single.value = selection.length != 1;
   multiple.value = !selection.length;
 };
-
+const router = useRouter();
 /** 新增按钮操作 */
 const handleAdd = () => {
-  reset();
-  dialog.visible = true;
-  dialog.title = '添加设备';
+  router.push({
+    path: '/equipment/addArchive'
+  });
 };
 
 /** 修改按钮操作 */
 const handleUpdate = async (row?: DeviceVO) => {
-  reset();
-  const _id = row?.id || ids.value[0];
-  const res = await getDevice(_id);
-  Object.assign(form.value, res.data);
-  dialog.visible = true;
-  dialog.title = '修改设备';
+  router.push({
+    path: '/equipment/addArchive',
+    query: {
+      id: row.id
+    }
+  });
+};
+/** 详情按钮操作 */
+const handleMain = async (row?: DeviceVO) => {
+  router.push({
+    path: '/equipment/archiveMain',
+    query: {
+      id: row.id
+    }
+  });
 };
 
 /** 提交按钮 */
@@ -224,3 +244,8 @@ onMounted(() => {
   getList();
 });
 </script>
+<style lang="scss" scoped>
+.el-table {
+  height: calc(100% - 80px);
+}
+</style>