样式修改

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

@@ -28,7 +28,11 @@
         </div>
         <div class="right">
           <div class="btns">
-            <el-button type="primary" class="btn" @click="addStatus = true"
+            <el-button
+              type="primary"
+              class="btn"
+              @click="addStatus = true"
+              plain
               >新增</el-button
             >
           </div>
@@ -205,13 +209,14 @@ onMounted(() => {
 <style lang="scss" scoped>
 .tableView {
   width: 100%;
-  height: calc(100vh - 290px);
+  height: calc(100vh - 260px);
   padding: 20px 0px;
   border-radius: 16px;
 }
 .addForm {
   width: 100%;
-  height: calc(100vh - 290px);
+  height: calc(100%);
+  padding: 20px;
   display: flex;
   background-color: black;
   border-radius: 16px;
@@ -220,7 +225,7 @@ onMounted(() => {
 }
 .stepsViewScrollH {
   width: 100%;
-  height: calc(100vh - 270px);
+  height: calc(100vh - 240px);
   display: flex;
   padding: 20px;
   padding-top: 0px;
@@ -237,7 +242,7 @@ onMounted(() => {
 
     .tableView {
       width: 100%;
-      height: calc(100vh - 340px);
+      height: calc(100vh - 310px);
       padding: 20px 0px;
       border-radius: 16px !important;
     }

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

@@ -1,5 +1,5 @@
 <template>
-  <el-scrollbar style="width: 100%; height: 100%">
+  <el-scrollbar style="width: 100%; height: 100%; padding: 20px 0">
     <div class="media-container">
       <CameraUpload
         @reset-select="clickReset"
@@ -176,7 +176,6 @@ window.addEventListener("message", (event) => {
   overflow: hidden;
   position: relative;
 
-
   .img-box {
     width: 292px;
     height: 292px;

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

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="padding: 20px 0">
     <div v-if="!excelViewStatus">
       <el-table :data="tableData" class="tableView">
         <el-table-column

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="stepsViewScrollH">
+  <div class="stepsViewScrollH" style="width: 100%">
     <template v-if="submitStatus == true">
       <div class="operateBody">
         <el-scrollbar>
@@ -92,11 +92,6 @@
               <Plus />
             </el-icon>
           </div>
-          <div class="btns">
-            <el-button @click="btn" type="primary" v-if="submitStatus" plain>{{
-              submitStatus ? "返回 " : "编 辑"
-            }}</el-button>
-          </div>
         </el-scrollbar>
       </div>
     </template>
@@ -139,7 +134,7 @@
       <div
         style="
           height: 100%;
-          width: 100%;
+          width: calc(100% -40px);
           display: flex;
           justify-content: center;
           align-items: center;
@@ -150,8 +145,8 @@
       </div>
     </div>
     <div class="btns">
-      <el-button @click="btn" type="primary" v-if="!submitStatus" plain>{{
-        submitStatus ? "返回 " : "编 辑"
+      <el-button @click="btn" type="primary" plain>{{
+        submitStatus ? "返 回 " : "编 辑"
       }}</el-button>
     </div>
   </div>
@@ -285,6 +280,7 @@ onMounted(() => {
 
 .stepsViewScrollH {
   position: relative;
+  padding: 20px 0;
 }
 
 .active {
@@ -294,12 +290,12 @@ onMounted(() => {
 .btns {
   width: 100%;
   height: 70px;
-
   display: flex;
   align-items: center;
   justify-content: center;
   margin-top: 10px;
 
+
   .el-button {
     width: 120px;
     border-radius: 25px;
@@ -310,13 +306,11 @@ onMounted(() => {
 }
 
 .operateBody {
-  width: 100%;
-  height: calc(100%);
+  height: calc(100% - 40px);
 }
 
 .recordBody {
-  width: 100%;
-  height: calc(100% - 80px);
+  height: calc(100% - 40px);
   display: flex;
 
   .left {

src/views/pro-steps/index.vue

@@ -124,9 +124,13 @@
             <el-scrollbar>
               <div style="display: flex">
                 <div
-                  v-for="(item, index) in stepComponents"
+                  v-for="(item, index) in defaultComponents"
                   :key="index"
-                  class="scrollbar-demo-item"
+                  :class="
+                    componentsDisabled
+                      ? 'scrollbar-demo-item disabled'
+                      : 'scrollbar-demo-item'
+                  "
                 >
                   <router-link :to="{ name: item.name }" replace>
                     <div
@@ -427,7 +431,8 @@ const defaultComponents = [
   },
 ];
 //当前路由在setpComponents中的index
-const selectIndex = ref(0);
+const selectIndex = ref(null);
+const componentsDisabled = ref(true);
 
 //配置data固定路由参数等
 const setStepComponents = (data) => {
@@ -459,7 +464,9 @@ const getOpCompentArray = async () => {
 };
 //设置标签是否被选中
 const setSelectIndex = (index) => {
-  selectIndex.value = index;
+  if (componentsDisabled.value != true) {
+    selectIndex.value = index;
+  }
 };
 const init = async (index) => {
   if (taskIndex.value == null) {
@@ -492,9 +499,20 @@ onActivated(async () => {
   //缓存组件数据逻辑
   init(selectStepIndex.value);
 });
+watch(
+  () => taskIndex.value,
+  (val) => {
+    if (val != null) {
+      componentsDisabled.value = false;
+    }
+  }
+);
 </script>
 
 <style lang="scss" scoped>
+.disabled {
+  opacity: 0.6 !important;
+}
 :deep(.el-input__wrapper) {
   background-color: #000;
 }