fix: 工单管理

src/api/order/index.ts

@@ -1,5 +1,10 @@
 import { AxiosPromise } from "axios";
-import { OrderPageResult } from "@/api/order/types";
+import {
+  ModifyOrderForm,
+  OrderInfoServicePageResult,
+  OrderInfoVO,
+  OrderPageResult
+} from "@/api/order/types";
 import request from "@/utils/request";
 
 export function oderTablePage(data: SelectForm): AxiosPromise<OrderPageResult> {
@@ -9,3 +14,46 @@ export function oderTablePage(data: SelectForm): AxiosPromise<OrderPageResult> {
     data,
   });
 }
+export function findOrderInfoById(orderId: number): AxiosPromise<OrderInfoVO> {
+  return request({
+    url: `/api/order/v1/info/${orderId}`,
+    method: "GET",
+  });
+}
+
+export function findOrderInfoServicePage(
+  orderId: number,
+  data: PageQuery
+): AxiosPromise<OrderInfoServicePageResult> {
+  return request({
+    url: `/api/order-service/v1/order-info-service/${orderId}`,
+    method: "POST",
+    data,
+  });
+}
+
+export function updateOrderStatus(orderId: number, orderStatus?: string) {
+  return request({
+    url: `/api/order/v1/update-order-status/${orderId}/${orderStatus}`,
+    method: "PUT",
+  });
+}
+export function executeOrder(orderId: number) {
+  return request({
+    url: `/api/order/v1/execute-order/${orderId}`,
+    method: "PUT",
+  });
+}
+export function getModifyForm(orderId: number): AxiosPromise<ModifyOrderForm> {
+  return request({
+    url: `/api/order/v1/modify-form/${orderId}`,
+    method: "GET",
+  });
+}
+export function ModifyForm(data: ModifyOrderForm) {
+  return request({
+    url: `/api/order/v1/update-form`,
+    method: "POST",
+    data,
+  });
+}

src/api/order/types.ts

@@ -32,3 +32,55 @@ export interface OrderTableVO {
   devOnLineStatus?: string;
 }
 export type OrderPageResult = PageResult<OrderTableVO[]>;
+
+export interface OrderInfoVO {
+  orderId?: number;
+  receivedOrderId?: string;
+  receivedOrderLhs?: string;
+  orderRemark?: string;
+  orderServiceType?: string;
+  orderDate?: string;
+  receiveDate?: string;
+  orderDealDate?: string;
+  orderDeadline?: string;
+  adNo?: string;
+  orderStatus?: string;
+  pppoeAccount?: string;
+  bandAccess?: string;
+  iptvAccess?: string;
+  userSnNo?: string;
+  remark?: string;
+  devOnlineStatus?: string;
+  userSnKey?: string;
+  devAccessType?: string;
+
+  domain?: string;
+  orderCustomerKind?: string;
+  orderDoneFlag?: string;
+  orderDoneDate?: string;
+  dummyFlag?: string;
+}
+
+export interface OrderInfoServiceVO {
+  orderId?: number;
+
+  service?: string;
+
+  serviceFlag?: string;
+}
+export type OrderInfoServicePageResult = PageResult<OrderInfoServiceVO[]>;
+export interface ModifyOrderForm {
+  orderId?: number;
+
+  receivedOrderId?: string;
+
+  orderDate?: string;
+
+  adNo?: string;
+
+  orderServiceType?: string;
+
+  pppoeAccount?: string;
+
+  orderCustomerKind?: string;
+}

src/router/index.ts

@@ -195,6 +195,28 @@ export const constantRoutes: RouteRecordRaw[] = [
           title: "新增操作组件",
         },
       },
+      {
+        path: "/resources/order-info-edit/:orderId",
+        name: "OrderInfoEdit",
+        component: () =>
+          import("@/views/family/operate/order/components/OrderInfoEdit.vue"),
+        meta: {
+          hidden: true,
+          keepAlive: true,
+          title: "工单操作",
+        },
+      },
+      {
+        path: "/resources/modify-order/:orderId",
+        name: "ModifyOrder",
+        component: () =>
+          import("@/views/family/operate/order/components/ModifyOrder.vue"),
+        meta: {
+          hidden: true,
+          keepAlive: true,
+          title: "修改工单",
+        },
+      },
     ],
   },
 ];

src/views/family/operate/order/components/ModifyOrder.vue

@@ -0,0 +1,201 @@
+<template>
+  <div class="app-container">
+    <el-card shadow="never" v-loading="loading">
+      <el-form :model="formData" ref="ruleFormRef" :rules="rules">
+        <el-descriptions title="工单信息修改" :column="3" border>
+          <template #extra>
+            <el-popconfirm
+              title="确定修改工单吗?"
+              :icon="InfoFilled"
+              icon-color="#626AEF"
+              width="200"
+              @confirm="submitForm(ruleFormRef)"
+            >
+              <template #reference>
+                <el-button type="primary">保存</el-button>
+              </template>
+            </el-popconfirm>
+          </template>
+          <el-descriptions-item
+            label="工单序号"
+            label-align="left"
+            align="center"
+            label-class-name="my-label"
+            class-name="my-content"
+            width="150px"
+          >
+            <el-form-item prop="receivedOrderId" style="margin-bottom: 0">
+              <el-input
+                v-model="formData.receivedOrderId"
+                placeholder="请输入工单序号"
+              />
+            </el-form-item>
+          </el-descriptions-item>
+          <el-descriptions-item
+            label="开工单日期"
+            label-align="left"
+            align="center"
+            label-class-name="my-label"
+            class-name="my-content"
+            width="150px"
+          >
+            <el-form-item prop="orderDate" style="margin-bottom: 0">
+              <el-input v-model="formData.orderDate" />
+            </el-form-item>
+          </el-descriptions-item>
+          <el-descriptions-item
+            label="工单业务类型"
+            label-align="left"
+            align="center"
+            label-class-name="my-label"
+            class-name="my-content"
+            width="150px"
+          >
+            <el-form-item prop="orderServiceType" style="margin-bottom: 0">
+              <dictionary
+                v-model="formData.orderServiceType"
+                type-code="order_service_type"
+              />
+            </el-form-item>
+          </el-descriptions-item>
+          <el-descriptions-item
+            label="AD编号"
+            label-align="left"
+            align="center"
+            label-class-name="my-label"
+            class-name="my-content"
+            width="150px"
+          >
+            <el-form-item prop="adNo" style="margin-bottom: 0">
+              <el-input v-model="formData.adNo" />
+            </el-form-item>
+          </el-descriptions-item>
+          <el-descriptions-item
+            label="Pppoe账号"
+            label-align="left"
+            align="center"
+            label-class-name="my-label"
+            class-name="my-content"
+            width="150px"
+          >
+            <el-form-item prop="pppoeAccount" style="margin-bottom: 0">
+              <el-input v-model="formData.pppoeAccount" />
+            </el-form-item>
+          </el-descriptions-item>
+          <el-descriptions-item
+            label="客户类型"
+            label-align="left"
+            align="center"
+            label-class-name="my-label"
+            class-name="my-content"
+            width="150px"
+          >
+            <el-form-item prop="orderCustomerKind" style="margin-bottom: 0">
+              <dictionary
+                v-model="formData.orderCustomerKind"
+                type-code="custom_type"
+              />
+            </el-form-item>
+          </el-descriptions-item>
+        </el-descriptions>
+      </el-form>
+      <div class="mt-1">
+        <div style="display: flex; justify-content: space-between">
+          <div style="font-weight: 700; line-height: 32px; font-size: 14px">
+            工单业务信息列表
+          </div>
+        </div>
+        <div class="any-table">
+          <el-table :data="orderServiceList">
+            <el-table-column label="业务名称" prop="service" align="center" />
+            <el-table-column
+              label="业务变更信息"
+              prop="serviceFlag"
+              align="center"
+            />
+          </el-table>
+          <pagination
+            v-if="total > 0"
+            v-model:total="total"
+            v-model:page="queryPage.pageNum"
+            v-model:limit="queryPage.pageSize"
+            @pagination="getOrderInfoServiceList"
+          />
+        </div>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ModifyOrderForm, OrderInfoServiceVO } from "@/api/order/types";
+import {
+  findOrderInfoServicePage,
+  getModifyForm,
+  ModifyForm,
+} from "@/api/order";
+import { InfoFilled } from "@element-plus/icons-vue";
+import { FormInstance, FormRules } from "element-plus";
+const loading = ref<boolean>(false);
+const route = useRoute();
+const ruleFormRef = ref<FormInstance>();
+const formData = ref<ModifyOrderForm>({});
+let orderId: number = parseInt(<string>route.params.orderId);
+const queryPage = ref<PageQuery>({
+  pageNum: 1,
+  pageSize: 10,
+});
+const total = ref<number>(0);
+const orderServiceList = ref<OrderInfoServiceVO[]>([]);
+
+const rules = reactive<FormRules<ModifyOrderForm>>({
+  receivedOrderId: [
+    { required: true, message: "请填写工单序号", trigger: "blur" },
+  ],
+});
+const loadModifyForm = () => {
+  loading.value = true;
+  getModifyForm(orderId)
+    .then(({ data }) => {
+      formData.value = data;
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+};
+const getOrderInfoServiceList = () => {
+  findOrderInfoServicePage(orderId, queryPage.value).then(({ data }) => {
+    orderServiceList.value = data.list;
+    total.value = data.total;
+  });
+};
+const submitForm = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      loading.value = true;
+      ModifyForm(formData.value)
+        .then(() => {
+          ElMessage({
+            message: "操作成功",
+            duration: 1000,
+            type: "success",
+          });
+        })
+        .finally(() => {
+          loading.value = false;
+        });
+    }
+  });
+};
+onMounted(() => {
+  loadModifyForm();
+  getOrderInfoServiceList();
+});
+</script>
+
+<style scoped>
+:deep(.my-label) {
+  background: var(--el-color-white) !important;
+}
+</style>

src/views/family/operate/order/components/OrderInfoEdit.vue

@@ -0,0 +1,409 @@
+<template>
+  <div class="app-container">
+    <div
+      class="search-container"
+      style="padding: 10px; display: flex; justify-content: flex-end"
+    >
+      <el-popconfirm
+        title="确定修改工单状态吗?"
+        :icon="InfoFilled"
+        icon-color="#626AEF"
+        width="200"
+        @confirm="save"
+      >
+        <template #reference>
+          <el-button type="primary">保存</el-button>
+        </template>
+      </el-popconfirm>
+      <el-popconfirm
+        title="确定手动执行工单吗?"
+        :icon="InfoFilled"
+        icon-color="#626AEF"
+        width="200"
+        @confirm="execute"
+      >
+        <template #reference>
+          <el-button type="primary" v-hasPerm="['family:operate:order:execute']"
+            >执行</el-button
+          >
+        </template>
+      </el-popconfirm>
+
+      <el-button type="primary" @click="skipModifyOrder">修改</el-button>
+      <el-button type="primary">设备操作维护</el-button>
+      <el-button type="primary">工单日志</el-button>
+    </div>
+    <el-card shadow="never" v-loading="loading">
+      <el-scrollbar height="500">
+        <el-descriptions title="工单信息" :column="3" border>
+          <el-descriptions-item
+            label="工单序号"
+            label-align="left"
+            align="center"
+            label-class-name="my-label"
+            class-name="my-content"
+            width="150px"
+          >
+            {{ orderInfo.receivedOrderId }}
+          </el-descriptions-item>
+          <el-descriptions-item
+            label="工单受理号"
+            label-align="left"
+            align="center"
+            label-class-name="my-label"
+            class-name="my-content"
+            width="150px"
+          >
+            {{ orderInfo.receivedOrderLhs }}
+          </el-descriptions-item>
+          <el-descriptions-item
+            label="操作类型"
+            label-align="left"
+            align="center"
+            label-class-name="my-label"
+            class-name="my-content"
+            width="150px"
+          >
+            {{ orderInfo.orderRemark }}
+          </el-descriptions-item>
+          <el-descriptions-item
+            label="工单业务类型"
+            label-align="left"
+            align="center"
+            label-class-name="my-label"
+            class-name="my-content"
+            width="150px"
+          >
+            {{ orderInfo.orderServiceType }}
+          </el-descriptions-item>
+          <el-descriptions-item
+            label="开工单日期"
+            label-align="left"
+            align="center"
+            label-class-name="my-label"
+            class-name="my-content"
+            width="150px"
+          >
+            {{ orderInfo.orderDate }}
+          </el-descriptions-item>
+          <el-descriptions-item
+            label="工单接收日期"
+            label-align="left"
+            align="center"
+            label-class-name="my-label"
+            class-name="my-content"
+            width="150px"
+          >
+            {{ orderInfo.receiveDate }}
+          </el-descriptions-item>
+          <el-descriptions-item
+            label="工单要求完工日期"
+            label-align="left"
+            align="center"
+            label-class-name="my-label"
+            class-name="my-content"
+            width="150px"
+          >
+            {{ orderInfo.orderDealDate }}
+          </el-descriptions-item>
+          <el-descriptions-item
+            label="工单处理日期"
+            label-align="left"
+            align="center"
+            label-class-name="my-label"
+            class-name="my-content"
+            width="150px"
+          >
+            {{ orderInfo.orderDeadline }}
+          </el-descriptions-item>
+          <el-descriptions-item
+            label="AD编号"
+            label-align="left"
+            align="center"
+            label-class-name="my-label"
+            class-name="my-content"
+            width="150px"
+          >
+            {{ orderInfo.adNo }}
+          </el-descriptions-item>
+          <el-descriptions-item
+            label="手工绑定设备标识"
+            label-align="left"
+            align="center"
+            label-class-name="my-label"
+            class-name="my-content"
+            width="150px"
+          >
+            <el-tag
+              v-if="
+                orderInfo.orderStatus === '1' ||
+                orderInfo.orderStatus === '3' ||
+                orderInfo.orderStatus === '5'
+              "
+              >未绑定设备</el-tag
+            >
+          </el-descriptions-item>
+          <el-descriptions-item
+            label="工单状态"
+            label-align="left"
+            align="center"
+            label-class-name="my-label"
+            class-name="my-content"
+            width="150px"
+          >
+            <dictionary type-code="order_status" v-model="orderStatus" />
+          </el-descriptions-item>
+          <el-descriptions-item
+            label="PPPoE帐号"
+            label-align="left"
+            align="center"
+            label-class-name="my-label"
+            class-name="my-content"
+            width="150px"
+          >
+            {{ orderInfo.pppoeAccount }}
+          </el-descriptions-item>
+          <el-descriptions-item
+            label="BANDAccess"
+            label-align="left"
+            align="center"
+            label-class-name="my-label"
+            class-name="my-content"
+            width="150px"
+          >
+            {{ orderInfo.bandAccess }}
+          </el-descriptions-item>
+          <el-descriptions-item
+            label="IPTVAccess"
+            label-align="left"
+            align="center"
+            label-class-name="my-label"
+            class-name="my-content"
+            width="150px"
+          >
+            {{ orderInfo.iptvAccess }}
+          </el-descriptions-item>
+          <el-descriptions-item
+            label="逻辑ID"
+            label-align="left"
+            align="center"
+            label-class-name="my-label"
+            class-name="my-content"
+            width="150px"
+          >
+            {{ orderInfo.userSnNo }}
+          </el-descriptions-item>
+          <el-descriptions-item
+            label="备注"
+            label-align="left"
+            align="center"
+            label-class-name="my-label"
+            class-name="my-content"
+            width="150px"
+          >
+            {{ orderInfo.remark }}
+          </el-descriptions-item>
+          <el-descriptions-item
+            label="设备在线状态"
+            label-align="left"
+            align="center"
+            label-class-name="my-label"
+            class-name="my-content"
+            width="150px"
+          >
+            {{ orderInfo.devOnlineStatus }}
+          </el-descriptions-item>
+          <el-descriptions-item
+            label="逻辑KEY"
+            label-align="left"
+            align="center"
+            label-class-name="my-label"
+            class-name="my-content"
+            width="150px"
+          >
+            {{ orderInfo.userSnKey }}
+          </el-descriptions-item>
+          <el-descriptions-item
+            label="接入方式"
+            label-align="left"
+            align="center"
+            label-class-name="my-label"
+            class-name="my-content"
+            width="150px"
+          >
+            {{ orderInfo.devAccessType }}
+          </el-descriptions-item>
+        </el-descriptions>
+        <el-descriptions
+          title="客户信息"
+          :column="3"
+          border
+          style="margin-top: 10px"
+        >
+          <el-descriptions-item
+            label="系统管理域"
+            label-align="left"
+            align="center"
+            label-class-name="my-label"
+            class-name="my-content"
+            width="150px"
+          >
+            {{ orderInfo.domain }}
+          </el-descriptions-item>
+          <el-descriptions-item
+            label="政企管理域"
+            label-align="left"
+            align="center"
+            label-class-name="my-label"
+            class-name="my-content"
+            width="150px"
+          />
+          <el-descriptions-item
+            label="客户类型"
+            label-align="left"
+            align="center"
+            label-class-name="my-label"
+            class-name="my-content"
+            width="150px"
+          >
+            {{ orderInfo.orderCustomerKind }}
+          </el-descriptions-item>
+          <el-descriptions-item
+            label="回单标志"
+            label-align="left"
+            align="center"
+            label-class-name="my-label"
+            class-name="my-content"
+            width="150px"
+          >
+            {{ orderInfo.orderDoneFlag }}
+          </el-descriptions-item>
+          <el-descriptions-item
+            label="回单日期"
+            label-align="left"
+            align="center"
+            label-class-name="my-label"
+            class-name="my-content"
+            width="150px"
+          >
+            {{ orderInfo.orderDoneDate }}
+          </el-descriptions-item>
+          <el-descriptions-item
+            label="虚拟标志"
+            label-align="left"
+            align="center"
+            label-class-name="my-label"
+            class-name="my-content"
+            width="150px"
+          >
+            {{ orderInfo.dummyFlag }}
+          </el-descriptions-item>
+        </el-descriptions>
+        <div class="mt-1">
+          <div style="display: flex; justify-content: space-between">
+            <div style="font-weight: 700; line-height: 32px; font-size: 14px">
+              工单业务信息列表
+            </div>
+          </div>
+          <div class="any-table">
+            <el-table :data="orderServiceList">
+              <el-table-column label="业务名称" prop="service" align="center" />
+              <el-table-column
+                label="业务变更信息"
+                prop="serviceFlag"
+                align="center"
+              />
+            </el-table>
+            <pagination
+              v-if="total > 0"
+              v-model:total="total"
+              v-model:page="queryPage.pageNum"
+              v-model:limit="queryPage.pageSize"
+              @pagination="getOrderInfoServiceList"
+            />
+          </div>
+        </div>
+      </el-scrollbar>
+    </el-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { OrderInfoServiceVO, OrderInfoVO } from "@/api/order/types";
+import {
+  executeOrder,
+  findOrderInfoById,
+  findOrderInfoServicePage,
+  updateOrderStatus,
+} from "@/api/order";
+import { InfoFilled } from "@element-plus/icons-vue";
+
+const route = useRoute();
+const router = useRouter();
+let orderId: number = parseInt(<string>route.params.orderId);
+const orderInfo = ref<OrderInfoVO>({});
+const loading = ref<boolean>(false);
+const orderStatus = ref<string>();
+const queryPage = ref<PageQuery>({
+  pageNum: 1,
+  pageSize: 10,
+});
+const total = ref<number>(0);
+const orderServiceList = ref<OrderInfoServiceVO[]>([]);
+const getData = () => {
+  loading.value = true;
+  findOrderInfoById(orderId)
+    .then(({ data }) => {
+      orderInfo.value = data;
+      orderStatus.value = data.orderStatus;
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+};
+const getOrderInfoServiceList = () => {
+  findOrderInfoServicePage(orderId, queryPage.value).then(({ data }) => {
+    orderServiceList.value = data.list;
+    total.value = data.total;
+  });
+};
+const save = () => {
+  console.log(orderStatus.value);
+  loading.value = true;
+  updateOrderStatus(orderId, <string>orderStatus.value)
+    .then()
+    .finally(() => {
+      loading.value = false;
+    });
+};
+const execute = () => {
+  loading.value = true;
+  executeOrder(orderId)
+    .then(() => {
+      ElMessage({
+        message: "执行成功",
+        duration: 1000,
+        type: "success",
+      });
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+};
+const skipModifyOrder = () => {
+  router.push({ path: `/resources/modify-order/${orderId}` });
+};
+onMounted(() => {
+  getData();
+  getOrderInfoServiceList();
+});
+</script>
+
+<style scoped>
+:deep(.my-label) {
+  background: var(--el-color-white) !important;
+}
+:deep(.el-scrollbar__thumb) {
+  display: none;
+}
+</style>

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

@@ -55,7 +55,7 @@
         </div>
       </template>
       <div class="any-table">
-        <el-table v-loading="loading" :data="tableData">
+        <el-table v-loading="loading" :data="tableData" max-height="380">
           <el-table-column
             label="工单序号"
             align="center"
@@ -63,7 +63,16 @@
             width="250"
             prop="receivedOrderId"
             v-if="columns[0].show"
-          />
+          >
+            <template #default="scope">
+              <el-button
+                type="primary"
+                @click="skipOrderEdit(scope.row.orderId)"
+                link
+                >{{ scope.row.receivedOrderId }}</el-button
+              >
+            </template>
+          </el-table-column>
           <el-table-column
             label="受理号"
             align="center"
@@ -190,6 +199,7 @@ const queryForm = ref<SelectForm>({
   pageNum: 1,
   pageSize: 10,
 });
+const router = useRouter();
 const total = ref<number>(0);
 const tableData = ref<OrderTableVO[]>([]);
 const options = ref<OptionType[]>([
@@ -248,6 +258,9 @@ const handleQuery = () => {
       loading.value = false;
     });
 };
+const skipOrderEdit = (orderId: number) => {
+  router.push({ path: `/resources/order-info-edit/${orderId}` });
+};
 </script>
 
 <style scoped></style>