1.报故 2. axios

src/styles/index.scss

@@ -47,3 +47,12 @@
 .elColClasss {
   height: calc(100vh - 130px);
 }
+
+.drawerTitle {
+  width: 100%;
+  height: 38px;
+  font-weight: 500;
+  font-size: 38px;
+  color: rgba(0, 0, 0, 0.9);
+  text-align: center;
+}

src/utils/request.ts

@@ -1,4 +1,4 @@
-import axios, { InternalAxiosRequestConfig, AxiosResponse } from "axios";
+import axios, { AxiosResponse, InternalAxiosRequestConfig } from "axios";
 import { useUserStoreHook } from "@/store/modules/user";
 
 // 创建 axios 实例
@@ -35,6 +35,20 @@ service.interceptors.response.use(
       return response;
     }
 
+    // token 过期,重新登录
+    if (code === "4106") {
+      ElMessageBox.confirm("当前页面已失效，请重新登录", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      }).then(() => {
+        const userStore = useUserStoreHook();
+        userStore.resetToken().then(() => {
+          location.reload();
+        });
+      });
+    }
+
     ElMessage.error(msg || "系统出错");
 
     return Promise.reject(new Error(msg || "Error"));
@@ -42,21 +56,8 @@ service.interceptors.response.use(
   (error: any) => {
     if (error.response.data) {
       const { code, msg } = error.response.data;
-      // token 过期,重新登录
-      if (code === "A0230") {
-        ElMessageBox.confirm("当前页面已失效，请重新登录", "提示", {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          type: "warning",
-        }).then(() => {
-          const userStore = useUserStoreHook();
-          userStore.resetToken().then(() => {
-            location.reload();
-          });
-        });
-      } else {
-        ElMessage.error(msg || "系统出错");
-      }
+
+      ElMessage.error(msg || "系统出错");
     }
     return Promise.reject(error.message);
   }

src/views/pro-operation/report-break/index.vue

@@ -0,0 +1,135 @@
+<template>
+  <el-drawer
+    v-model="drawerVisible"
+    :show-close="false"
+    direction="rtl"
+    size="972px"
+  >
+    <template #header>
+      <div class="drawerTitle">报故</div>
+    </template>
+    <template #default>
+      <el-scrollbar>
+        <div id="drawContent">
+          <el-form
+            :model="formLabelAlign"
+            label-position="top"
+            label-width="auto"
+            size="large"
+          >
+            <el-form-item label="Name">
+              <div class="base-info">
+                <div class="info-item">
+                  <div class="item-label">产品名称</div>
+                  <div class="item-value">DASDF-ASFASF-AS天线</div>
+                </div>
+              </div>
+            </el-form-item>
+            <el-form-item label="Activity zone">
+              <el-input v-model="formLabelAlign.region" />
+            </el-form-item>
+            <el-form-item label="Activity form">
+              <el-input v-model="formLabelAlign.type" />
+            </el-form-item>
+          </el-form>
+        </div>
+      </el-scrollbar>
+    </template>
+    <template #footer>
+      <div class="bottom-btns">
+        <el-button class="cancelBtn" @click="cancelClick">取消</el-button>
+        <el-button class="sureBtn" type="primary" @click="confirmClick"
+          >报故
+        </el-button>
+      </div>
+    </template>
+  </el-drawer>
+</template>
+
+<script lang="ts" setup>
+const drawerVisible = ref(false);
+
+const formLabelAlign = reactive({
+  name: "",
+  region: "",
+  type: "",
+});
+
+const openReportBreakDrawer = () => {
+  drawerVisible.value = true;
+};
+
+const cancelClick = () => {
+  drawerVisible.value = false;
+};
+
+const confirmClick = () => {
+  drawerVisible.value = false;
+};
+
+defineExpose({
+  openReportBreakDrawer,
+});
+</script>
+
+<style lang="scss" scoped>
+//#drawContent {
+//  :deep(.el-form--large.el-form--label-top .el-form-item .el-form-item__label) {
+//    font-weight: 500;
+//    font-size: 22px;
+//    color: rgba(0, 0, 0, 0.9);
+//    text-align: left;
+//  }
+//}
+
+.base-info {
+  height: 351px;
+  width: 100%;
+  background: #e3e5e7;
+  border-radius: 16px 16px 16px 16px;
+
+  .info-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 64px;
+    padding: 0 30px;
+
+    .item-label {
+      font-size: 20px;
+      color: rgba(0, 0, 0, 0.6);
+    }
+
+    .item-value {
+      font-weight: 500;
+      font-size: 24px;
+      color: rgba(0, 0, 0, 0.9);
+    }
+  }
+}
+
+.bottom-btns {
+  display: flex;
+  justify-content: center;
+  margin-top: 20px;
+  margin-bottom: 20px;
+
+  .button {
+    margin-right: 20px;
+  }
+
+  .cancelBtn {
+    width: 292px;
+    height: 80px;
+    background: rgba(0, 0, 0, 0.06);
+    border-radius: 76px 76px 76px 76px;
+  }
+
+  .sureBtn {
+    width: 292px;
+    height: 80px;
+    background: #0a59f7;
+    border-radius: 76px 76px 76px 76px;
+  }
+}
+</style>

src/views/pro-steps/components/operates.vue

@@ -1,20 +1,51 @@
 <template>
   <div class="container">
-    <div :class="selectIndex == index ? 'operator active' : 'operator'" v-for="(item, index) in stepComponents"
-      :key="index" @click="setIndex(index)">
+    <div
+      v-for="(item, index) in stepComponents"
+      :key="index"
+      :class="selectIndex == index ? 'operator active' : 'operator'"
+      @click="setIndex(index)"
+    >
       <div class="operatorText">{{ item.compentName }}</div>
       <div class="operatorIcon">
         <svg-icon :icon-class="item.compentType" size="45" />
       </div>
     </div>
+
+    <ReportBreak ref="reportBreakRef" />
   </div>
 </template>
 
 <script lang="ts" setup>
+import ReportBreak from "@/views/pro-operation/report-break/index.vue"; // ================ 报故
+
+// ================ 报故
+const reportBreakRef = ref<InstanceType<typeof ReportBreak>>();
+
 const selectIndex = ref(0);
 const setIndex = (index: number) => {
   selectIndex.value = index;
+  switch (stepComponents.value[index].compentType) {
+    case "baogu":
+      reportBreakRef.value?.openReportBreakDrawer();
+      break;
+    case "gongweishangliao":
+      break;
+    case "liuzhuan":
+      break;
+    case "tuzhi":
+      break;
+    case "weiwai":
+      break;
+    case "baogu":
+      break;
+    case "baogong":
+      break;
+    default:
+      break;
+  }
 };
+
 const stepComponents = ref([
   {
     compentName: "叫料",
@@ -33,6 +64,10 @@ const stepComponents = ref([
     compentType: "tuzhi",
   },
   {
+    compentName: "委外",
+    compentType: "weiwai",
+  },
+  {
     compentName: "报故",
     compentType: "baogu",
   },