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

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

@@ -0,0 +1,235 @@
+<template>
+  <div class="AddBuildingBox">
+    <PageHeader></PageHeader>
+    <div class="AddBuildingBody">
+      <div class="title flex flex-items-center justify-between">
+        <div>
+          <span>基本信息</span>
+          <el-button class="ml-10px" link type="primary"> 编辑</el-button>
+        </div>
+        <el-button @click="cancelForm"> 返回</el-button>
+      </div>
+      <div class="addBuildingFormBody">
+        <div class="infobox">
+          <div class="info_item">
+            <div class="label">设备分类：</div>
+            <span class="value">{{ form.categoryName }}</span>
+          </div>
+          <div class="info_item">
+            <div class="label">设备名称：</div>
+            <span class="value">{{ form.deviceName }}</span>
+          </div>
+          <div class="info_item">
+            <div class="label">设备编号：</div>
+            <span class="value">{{ form.deviceCode }}</span>
+          </div>
+          <div class="info_item">
+            <div class="label">品牌型号：</div>
+            <span class="value">{{ form.deviceModel }}</span>
+          </div>
+          <div class="info_item">
+            <div class="label">所在区域：</div>
+            <span class="value">{{ form.area }}</span>
+          </div>
+          <div class="info_item">
+            <div class="label">设备状态：</div>
+            <span class="value">电梯</span>
+          </div>
+          <div class="info_item">
+            <div class="label">维护人员：</div>
+            <span class="value">{{ form.maintainUserListName }}</span>
+          </div>
+          <div class="info_item">
+            <div class="label">添加时间：</div>
+            <span class="value">{{ form.createTime }}</span>
+          </div>
+          <div></div>
+          <div class="info_item">
+            <div class="label">备注：</div>
+            <span class="value">{{ form.remark }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="AddBuildingBody">
+      <div class="title">维修记录</div>
+      <div class="addBuildingFormBody">
+        <el-table v-loading="loading" :data="deviceRepairList">
+          <el-table-column type="index" align="center" />
+          <el-table-column label="设备名称" align="center" prop="deviceName" />
+          <el-table-column label="设备编号" align="center" prop="deviceCode" />
+          <el-table-column label="维修人员" align="center" prop="maintainUserNames" />
+          <el-table-column label="故障描述" align="center" prop="faultDesc" />
+          <el-table-column label="维修结果" align="center" prop="repairResult">
+            <template #default="scope">
+              <dict-tag :options="com_equipment_repair_status" :value="scope.row.repairResult"></dict-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width">
+            <template #default="scope">
+              <el-button link type="primary" @click="handleMain(scope.row)">详情</el-button>
+              <el-button link type="primary" @click="handleEdit(scope.row)">修改</el-button>
+              <el-button link type="primary" @click="handleDelete(scope.row)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import PageHeader from '@/components/Pageheader/index.vue';
+import { getDevice } from '@/api/system/equipment/archive';
+import { DeviceRepairVO } from '@/api/system/equipment/Repair/type';
+import { delDeviceRepair, listDeviceRepair } from '@/api/system/equipment/Repair';
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const { com_equipment_repair_status } = toRefs<any>(proxy?.useDict('com_equipment_repair_status'));
+
+const router = useRouter();
+const route = useRoute();
+const form = ref({
+  id: null,
+  categoryId: '', // 分类id、
+  deviceName: '', // 设备名称
+  deviceCode: '', // 编号
+  deviceModel: '', // 型号
+  area: '', // 区域
+  status: '0', // 区域
+  maintainUserIds: '', // 设备维护人员
+  maintainUserListName: '', // 设备维护人员
+  createTime: '', // 设备维护人员
+  remark: '' // 备注
+});
+
+const userid = ref(null);
+const total = ref(0);
+const loading = ref(false);
+const deviceRepairList = ref([]);
+
+const queryParams = ref({
+  pageNum: 1,
+  pageSize: 10
+});
+
+function init() {
+  if (route.query.id) {
+    userid.value = route.query.id;
+    getDevice(userid.value).then(async (res) => {
+      form.value = {
+        id: res.data.id,
+        categoryId: res.data.categoryId,
+        deviceName: res.data.deviceName,
+        deviceCode: res.data.deviceCode,
+        deviceModel: res.data.deviceModel,
+        area: res.data.area,
+        status: res.data.status,
+        maintainUserIds: res.data.maintainUserIds,
+        remark: res.data.remark,
+        createTime: res.data.createTime,
+        maintainUserListName: ''
+      };
+      if (res.data.maintainUserList && res.data.maintainUserList.length > 0) {
+        form.value.maintainUserListName = res.data.maintainUserList
+          .map((it) => (it.nickName ? it.nickName : null))
+          .filter((it) => it !== null)
+          .join(',');
+      }
+      getlist();
+    });
+  }
+}
+init();
+
+async function getlist() {
+  loading.value = true;
+  const rows = await listDeviceRepair();
+  deviceRepairList.value = rows.rows;
+  deviceRepairList.value.forEach((item) => {
+    item.maintainUserNames = item.maintainUserList
+      .map((i) => i.nickName)
+      .filter((i) => i)
+      .join(',');
+  });
+  total.value = rows.total;
+  loading.value = false;
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (row?: DeviceRepairVO) => {
+  const _ids = row?.id;
+  await proxy?.$modal.confirm('是否确认删除维修工单？');
+  await delDeviceRepair(_ids);
+  proxy?.$modal.msgSuccess('删除成功');
+  getlist();
+};
+
+const handleMain = (row) => {
+  router.push({
+    path: '/equipment/equipmentRepairMain',
+    query: {
+      id: row.id
+    }
+  });
+};
+const handleEdit = (row) => {
+  router.push({
+    path: '/equipment/addEquipmentRepair',
+    query: {
+      id: row.id
+    }
+  });
+};
+// 推出
+const cancelForm = () => {
+  router.back();
+};
+</script>
+
+<style scoped lang="scss">
+.AddBuildingBox {
+  padding: 15px;
+  height: 100%;
+  width: 100%;
+}
+.AddBuildingBody {
+  margin-top: 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  background-color: white;
+  padding: 15px;
+  .title {
+    height: 40px;
+    line-height: 40px;
+    padding-left: 20px;
+    background-color: rgba(255, 255, 255, 1);
+    color: rgba(16, 16, 16, 1);
+    border-bottom: 1px solid #bbbbbb;
+    margin-bottom: 30px;
+  }
+
+  .addBuildingFormBody {
+    padding-left: 20px;
+    .infobox {
+      display: grid;
+      gap: 20px;
+      grid-template-columns: repeat(3, 1fr);
+      .info_item {
+        display: flex;
+        align-items: center;
+        .label {
+          width: 100px;
+          text-align: right;
+        }
+        .value {
+          font-weight: 450;
+        }
+      }
+    }
+  }
+}
+</style>