feat: 工单管理列表

src/App.vue

@@ -47,7 +47,4 @@ const fontColor = computed(() => {
 .el-card__footer {
   padding: calc(10px - 2px) 10px !important;
 }
-.el-scrollbar__thumb {
-  display: none !important;
-}
 </style>

src/api/order/index.ts

@@ -0,0 +1,11 @@
+import { AxiosPromise } from "axios";
+import { OrderPageResult } from "@/api/order/types";
+import request from "@/utils/request";
+
+export function oderTablePage(data: SelectForm): AxiosPromise<OrderPageResult> {
+  return request({
+    url: "/api/order/v1/page",
+    method: "POST",
+    data,
+  });
+}

src/api/order/types.ts

@@ -0,0 +1,34 @@
+export interface OrderTableVO {
+  orderId?: number;
+
+  receivedOrderId?: string;
+
+  receivedOrderLhs?: string;
+
+  orderDate?: string;
+
+  adNo?: string;
+
+  orderStatus?: string;
+
+  orderRemark?: string;
+
+  orderServiceType?: string;
+
+  operRemark?: string;
+
+  port?: string;
+
+  pppoeAccount?: string;
+
+  telNum?: string;
+
+  domain?: string;
+
+  remark3?: string;
+
+  receivedDate?: string;
+
+  devOnLineStatus?: string;
+}
+export type OrderPageResult = PageResult<OrderTableVO[]>;

src/views/family/operate/index.vue

@@ -1,3 +1,20 @@
 <template>
-  <router-view />
+  <router-view>
+    <template #default="{ Component, route }">
+      <transition
+        enter-active-class="animate__animated animate__fadeIn"
+        mode="out-in"
+      >
+        <keep-alive :include="cachedViews">
+          <component :is="Component" :key="route.path" />
+        </keep-alive>
+      </transition>
+    </template>
+  </router-view>
 </template>
+
+<script setup lang="ts">
+import { useTagsViewStore } from "@/store";
+
+const cachedViews = computed(() => useTagsViewStore().cachedViews); // 缓存页面集合
+</script>

src/views/family/operate/order/index.vue

@@ -0,0 +1,253 @@
+<template>
+  <div class="app-container">
+    <div class="search-container">
+      <el-form :model="queryForm" :inline="true">
+        <el-row>
+          <el-col :span="6">
+            <el-form-item label="查询条件">
+              <el-select
+                v-model="queryForm.selectName"
+                placeholder="请选择"
+                style="width: 240px"
+                @change="resetSelect"
+                clearable
+              >
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col
+            :span="6"
+            v-if="
+              queryForm.selectName !== undefined &&
+              queryForm.selectName !== 'regionAreaId'
+            "
+          >
+            <el-input
+              v-model="queryForm.selectValue"
+              placeholder="请输入"
+              style="width: 300px"
+            />
+          </el-col>
+          <el-col :span="buttonColSpan">
+            <el-form-item>
+              <el-button type="primary" :icon="Search" @click="handleQuery"
+                >搜索
+              </el-button>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </div>
+
+    <el-card shadow="never">
+      <template #header>
+        <div style="display: flex; justify-content: flex-end">
+          <el-button type="primary" style="margin-right: 10px"
+            >合并工单
+          </el-button>
+          <table-bar :columns="columns" @change-columns="changeColumns" />
+        </div>
+      </template>
+      <div class="any-table">
+        <el-table v-loading="loading" :data="tableData">
+          <el-table-column
+            label="工单序号"
+            align="center"
+            fixed
+            width="250"
+            prop="receivedOrderId"
+            v-if="columns[0].show"
+          />
+          <el-table-column
+            label="受理号"
+            align="center"
+            width="180"
+            prop="receivedOrderLhs"
+            v-if="columns[1].show"
+          />
+          <el-table-column
+            label="开工单日期"
+            align="center"
+            prop="orderDate"
+            width="180"
+            v-if="columns[2].show"
+          />
+          <el-table-column
+            label="AD编号"
+            align="center"
+            prop="adNo"
+            width="180"
+            v-if="columns[3].show"
+          />
+          <el-table-column
+            label="工单状态"
+            align="center"
+            prop="orderStatus"
+            v-if="columns[4].show"
+          />
+          <el-table-column
+            label="操作类型"
+            align="center"
+            prop="orderRemark"
+            v-if="columns[5].show"
+          />
+          <el-table-column
+            label="工单业务类型"
+            align="center"
+            width="180"
+            prop="orderServiceType"
+            v-if="columns[6].show"
+          />
+          <el-table-column
+            label="业务类型"
+            align="center"
+            width="180"
+            prop="operRemark"
+            v-if="columns[7].show"
+          />
+          <el-table-column
+            label="端口"
+            align="center"
+            prop="port"
+            v-if="columns[8].show"
+          />
+          <el-table-column
+            label="PPPoe账号"
+            align="center"
+            prop="pppoeAccount"
+            width="180"
+            v-if="columns[9].show"
+          />
+          <el-table-column
+            label="电话号码"
+            align="center"
+            width="180"
+            prop="telNum"
+            v-if="columns[10].show"
+          />
+          <el-table-column
+            label="系统管理域"
+            align="center"
+            prop="domain"
+            width="180"
+            v-if="columns[11].show"
+          />
+          <el-table-column
+            label="是否定制终端"
+            align="center"
+            prop="remark3"
+            width="180"
+            v-if="columns[12].show"
+          >
+            <template #default="scope">
+              <span v-if="scope.row.remark3 === '1'">非定制终端</span>
+              <span v-else>定制终端</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="工单接收日期"
+            align="center"
+            prop="receivedDate"
+            width="180"
+            v-if="columns[13].show"
+          />
+          <el-table-column
+            label="设备上线状态"
+            align="center"
+            width="180"
+            prop="devOnLineStatus"
+            v-if="columns[14].show"
+          />
+        </el-table>
+      </div>
+      <pagination
+        v-if="total > 0"
+        v-model:total="total"
+        v-model:page="queryForm.pageNum"
+        v-model:limit="queryForm.pageSize"
+        @pagination="handleQuery"
+      />
+    </el-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Search } from "@element-plus/icons-vue";
+import { oderTablePage } from "@/api/order";
+import { OrderTableVO } from "@/api/order/types";
+
+defineOptions({
+  name: "Order",
+  inheritAttrs: false,
+});
+const queryForm = ref<SelectForm>({
+  pageNum: 1,
+  pageSize: 10,
+});
+const total = ref<number>(0);
+const tableData = ref<OrderTableVO[]>([]);
+const options = ref<OptionType[]>([
+  { label: "逻辑Id", value: "logicId" },
+  { label: "工单序号", value: "receiveOrderId" },
+  { label: "AD编号", value: "adNo" },
+  { label: "pppoe账号", value: "pppoe" },
+]);
+const loading = ref<boolean>(false);
+const buttonColSpan = computed(() => {
+  return queryForm.value.selectName === undefined ? 18 : 12;
+});
+const columns = ref<TableColumns[]>([
+  { name: "工单序号", show: true },
+  { name: "受理号", show: true },
+  { name: "开工单日期", show: true },
+  { name: "AD编号", show: true },
+  { name: "工单状态", show: true },
+  { name: "操作类型", show: false },
+  { name: "工单业务类型", show: false },
+  { name: "业务类型", show: true },
+  { name: "端口", show: true },
+  { name: "PPPoe账号", show: true },
+  { name: "电话号码", show: true },
+  { name: "系统管理域", show: true },
+  { name: "是否定制终端", show: false },
+  { name: "工单接收日期", show: false },
+  { name: "设备上线状态", show: false },
+]);
+const changeColumns = (newColumns: TableColumns[]) => {
+  columns.value = newColumns;
+};
+const resetSelect = () => {
+  queryForm.value.selectValue = undefined;
+};
+
+const handleQuery = () => {
+  if (
+    queryForm.value.selectName === undefined ||
+    queryForm.value.selectValue === undefined
+  ) {
+    ElMessage({
+      message: "查询条件不能为空",
+      type: "error",
+      duration: 1000,
+    });
+    return;
+  }
+  loading.value = true;
+  oderTablePage(queryForm.value)
+    .then(({ data }) => {
+      tableData.value = data.list;
+      total.value = data.total;
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+};
+</script>
+
+<style scoped></style>

src/views/resources/device-type/components/DeviceTypeVersionEdit.vue

@@ -726,12 +726,12 @@ onMounted(() => {
 :deep(.my-label) {
   background: var(--el-color-white) !important;
 }
+:deep(.el-scrollbar__thumb) {
+  display: none;
+}
 </style>
 <style>
 .el-descriptions__content.el-descriptions__cell.is-bordered-content {
   color: var(--el-text-color-regular);
 }
-.el-scrollbar__thumb {
-  display: none;
-}
 </style>

src/views/resources/equipment/components/EquipmentEdit.vue

@@ -508,4 +508,7 @@ onMounted(() => {
 :deep(.my-label) {
   background: var(--el-color-white) !important;
 }
+:deep(.el-scrollbar__thumb) {
+  display: none;
+}
 </style>