md

src/style/global.less

@@ -376,13 +376,19 @@ body {
     height: 100%;
     display: flex;
     flex-direction: column;
+    justify-content: space-between;
   }
   .sop-step-header {
+    flex-grow: 0;
+    flex-shrink: 0;
     .t-collapse-panel__content {
       padding: 8px 40px;
     }
   }
   .sop-step-mid {
+    flex-grow: 0;
+    flex-shrink: 0;
+
     .t-collapse-panel__icon {
       display: none;
     }
@@ -436,6 +442,27 @@ body {
     justify-content: space-between;
     align-items: stretch;
 
+    .step-list-header {
+      padding: 8px;
+    }
+
+    .step-tabs-label {
+      border-radius: 3px;
+      padding: 7px 16px;
+      line-height: 22px;
+      cursor: pointer;
+
+      &:not(:first-child) {
+        margin-top: 5px;
+      }
+
+      &:hover,
+      &.is-active {
+        color: @brand-color;
+        background-color: #e8f3ff;
+      }
+    }
+
     .t-tabs__bar {
       display: none;
     }
@@ -500,6 +527,7 @@ body {
       min-height: 65px;
     }
   }
+
   .sop-step-content {
     flex-grow: 2;
     border-radius: 3px;

src/style/tdesign-reset.less

@@ -90,3 +90,7 @@
     fill: #fff !important;
   }
 }
+
+.t-link--theme-primary.t-is-disabled {
+  color: #b0b0b0 !important;
+}

src/views/sop/sop-manage/office-sop/index.vue

@@ -89,8 +89,8 @@
           <div class="table-operations">
             <template v-if="perm.LINK_Fill">
               <t-link
-                v-if="
-                  row.myself && row.status !== 'END' && row.status !== 'FINISH'
+                :disabled="
+                  !row.myself || row.status === 'END' || row.status === 'FINISH'
                 "
                 theme="primary"
                 hover="color"
@@ -128,7 +128,7 @@
             </template>
             <template v-if="perm.LINK_ProjectExchange">
               <t-link
-                v-if="row.status !== 'END' && row.status !== 'FINISH'"
+                :disabled="row.status === 'END' || row.status === 'FINISH'"
                 theme="primary"
                 hover="color"
                 @click="planChangeHandle(row)"

src/views/sop/sop-manage/sop-step/index.vue

@@ -81,122 +81,128 @@
       </t-collapse-panel>
     </t-collapse>
 
-    <t-tabs
-      class="sop-step-list"
-      v-model="curStep"
-      placement="left"
-      @change="stepChange"
-    >
-      <t-tab-panel
-        v-for="item in tabs"
-        :key="item.taskKey"
-        :value="item.value"
-        :label="item.label"
-      >
-        <t-form
-          ref="form"
-          colon
-          class="sop-step-body"
-          :rules="rules"
-          :data="formData"
-          labelAlign="top"
+    <div class="t-tabs sop-step-list">
+      <div class="t-tabs__header step-list-header">
+        <div
+          v-for="item in allSteps"
+          :key="item.taskKey"
+          :class="[
+            'step-tabs-label',
+            { 'is-active': curStep === item.taskKey },
+          ]"
+          @click="switchStep(item)"
+          >{{ item.taskName }}</div
         >
-          <t-row :gutter="[0, 20]">
-            <t-col
-              :span="
-                fullWidthCodes.includes(config.code)
-                  ? 12
-                  : config.span < 6
-                  ? 6
-                  : config.span || 6
-              "
-              v-for="config in curFormConfig"
-              :key="config.id"
-            >
-              <dynamic-form-item
-                v-if="config.visable"
-                :config="config"
-                @change="itemValueChange"
-              ></dynamic-form-item>
-            </t-col>
-          </t-row>
-        </t-form>
-        <t-space class="sop-step-footer">
-          <template v-if="showAction">
-            <t-button v-if="IS_EDIT_MODE" theme="primary" @click="saveHandle"
-              >提交</t-button
-            >
-            <t-button
-              v-if="!IS_EDIT_MODE"
-              theme="primary"
-              @click="submitHandle()"
-              >提交</t-button
-            >
+      </div>
+      <div class="t-tabs__content">
+        <div class="t-tab-panel">
+          <t-form
+            ref="form"
+            colon
+            class="sop-step-body"
+            :rules="rules"
+            :data="formData"
+            labelAlign="top"
+          >
+            <t-row :gutter="[0, 20]">
+              <t-col
+                :span="
+                  fullWidthCodes.includes(config.code)
+                    ? 12
+                    : config.span < 6
+                    ? 6
+                    : config.span || 6
+                "
+                v-for="config in curFormConfig"
+                :key="config.id"
+              >
+                <dynamic-form-item
+                  v-if="config.visable"
+                  :config="config"
+                  @change="itemValueChange"
+                ></dynamic-form-item>
+              </t-col>
+            </t-row>
+          </t-form>
+          <t-space class="sop-step-footer">
+            <template v-if="showAction">
+              <t-button v-if="IS_EDIT_MODE" theme="primary" @click="saveHandle"
+                >提交</t-button
+              >
+              <t-button
+                v-if="!IS_EDIT_MODE"
+                theme="primary"
+                @click="submitHandle()"
+                >提交</t-button
+              >
 
-            <t-button
-              v-if="!IS_EDIT_MODE"
-              theme="default"
-              @click="submitHandle('DRAFT')"
-              >保存草稿</t-button
-            >
-          </template>
-        </t-space>
-        <!-- setup history -->
-        <div v-if="flowApproveHistoryList.length" class="sop-step-history">
-          <div class="sop-step-history-label" @click="toViewHistory">
-            <ChevronRightDoubleIcon v-if="stepHistoryShow" />
-            <ChevronLeftDoubleIcon v-else />
-            流程动态
-          </div>
-          <transition name="fade-slide" mode="out-in" appear>
-            <div v-if="stepHistoryShow" class="sop-step-history-content">
-              <div class="content-head">
-                <h2>
-                  {{ sop.statusStr }}
-                </h2>
-                <p>{{ stepDuration }}</p>
-              </div>
-              <div class="content-body">
-                <t-collapse>
-                  <t-collapse-panel
-                    v-for="(item, findex) in flowApproveHistoryList"
-                    :key="findex"
-                    :header="item.taskName"
-                  >
-                    <template #headerRightContent>
-                      <t-space size="small">
-                        <span class="collapse-head-right">{{
-                          timestampFilter(item.createTime)
-                        }}</span>
-                        <t-tag
-                          :theme="
-                            item.approveOperation === 'REJECT'
-                              ? 'danger'
-                              : 'success'
-                          "
-                          variant="light"
-                        >
-                          {{ item.approveRemark }}
-                        </t-tag>
-                      </t-space>
-                    </template>
-                    <div class="content-detail">
-                      <div class="content-detail-head">
-                        {{ item.approveUserName || '--' }}
-                      </div>
-                      <div class="content-detail-body">
-                        <p>开始处理：{{ timestampFilter(item.createTime) }}</p>
-                        <p>处理耗时：{{ item.duration }}</p>
+              <t-button
+                v-if="!IS_EDIT_MODE"
+                theme="default"
+                @click="submitHandle('DRAFT')"
+                >保存草稿</t-button
+              >
+            </template>
+          </t-space>
+          <!-- setup history -->
+          <div v-if="flowApproveHistoryList.length" class="sop-step-history">
+            <div class="sop-step-history-label" @click="toViewHistory">
+              <ChevronRightDoubleIcon v-if="stepHistoryShow" />
+              <ChevronLeftDoubleIcon v-else />
+              流程动态
+            </div>
+            <transition name="fade-slide" mode="out-in" appear>
+              <div v-if="stepHistoryShow" class="sop-step-history-content">
+                <div class="content-head">
+                  <h2>
+                    {{ sop.statusStr }}
+                  </h2>
+                  <p>{{ stepDuration }}</p>
+                </div>
+                <div class="content-body">
+                  <t-collapse>
+                    <t-collapse-panel
+                      v-for="(item, findex) in flowApproveHistoryList"
+                      :key="findex"
+                      :header="item.taskName"
+                    >
+                      <template #headerRightContent>
+                        <t-space size="small">
+                          <span class="collapse-head-right">{{
+                            timestampFilter(item.createTime)
+                          }}</span>
+                          <t-tag
+                            :theme="
+                              item.approveOperation === 'REJECT'
+                                ? 'danger'
+                                : 'success'
+                            "
+                            variant="light"
+                          >
+                            {{ item.approveRemark }}
+                          </t-tag>
+                        </t-space>
+                      </template>
+                      <div class="content-detail">
+                        <div class="content-detail-head">
+                          {{ item.approveUserName || '--' }}
+                        </div>
+                        <div class="content-detail-body">
+                          <p
+                            >开始处理：{{ timestampFilter(item.createTime) }}</p
+                          >
+                          <p>处理耗时：{{ item.duration }}</p>
+                        </div>
                       </div>
-                    </div>
-                  </t-collapse-panel>
-                </t-collapse>
+                    </t-collapse-panel>
+                  </t-collapse>
+                </div>
               </div>
-            </div>
-          </transition>
+            </transition>
+          </div>
         </div>
-      </t-tab-panel>
-    </t-tabs>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -291,8 +297,7 @@ const form = ref(null);
 const sopEditDetail = ref({});
 const allFormData = ref({});
 const allSteps = ref([]);
-const tabs = ref([]);
-const curStep = ref('');
+let curStep = ref('');
 const curStepData = ref({});
 const currFlowTaskResultSetup = ref(null);
 const flowId = props.sop.flowId;
@@ -355,23 +360,15 @@ const initNew = async () => {
   loading.value = false;
 
   allSteps.value = [res.formProperties];
-  tabs.value = allSteps.value.map((item) => {
-    return {
-      value: item.taskName,
-      label: item.taskName,
-    };
-  });
-  curStep.value = tabs.value[0].value;
-  curStepData.value = allSteps.value[0];
+  switchStep(allSteps.value[0]);
 };
 const initFill = async () => {
   loading.value = true;
   const res = await sopFlowViewApi({ flowId });
+  loading.value = false;
   crmInfo.value = res.crmInfo;
   updateSopInfo(crmInfo.value);
-  curStep.value = res.currFlowTaskResult.taskName;
   currFlowTaskResultSetup.value = res.currFlowTaskResult.setup;
-  curStepData.value = res.currFlowTaskResult;
   res.flowTaskHistoryList = res.flowTaskHistoryList || [];
   res.flowTaskHistoryList.forEach((item) => {
     item.formProperty.forEach((v) => {
@@ -381,12 +378,6 @@ const initFill = async () => {
   allSteps.value = [...res.flowTaskHistoryList, res.currFlowTaskResult].sort(
     (a, b) => a.setup - b.setup
   );
-  tabs.value = allSteps.value.map((item) => {
-    return {
-      value: item.taskName,
-      label: item.taskName,
-    };
-  });
   allSteps.value.forEach((item) => {
     item.formProperty.forEach((prop) => {
       prop.value = prop.value ? JSON.parse(prop.value).value : null;
@@ -396,7 +387,7 @@ const initFill = async () => {
     res.flowApproveHistoryList,
     allSteps.value
   );
-  loading.value = false;
+  switchStep(allSteps.value.slice(-1)[0]);
 };
 const initEdit = async () => {
   loading.value = true;
@@ -423,17 +414,8 @@ const initEdit = async () => {
     });
   });
   allFormData.value = allFormMap;
-
-  tabs.value = allSteps.value.map((item) => {
-    return {
-      value: item.taskName,
-      label: item.taskName,
-    };
-  });
-  curStep.value = tabs.value.slice(-1)[0].value;
-  const stepData = allSteps.value.find(
-    (item) => item.taskName === curStep.value
-  );
+  const stepData = allSteps.value.slice(-1)[0];
+  curStep = stepData.taskKey;
   curStepData.value = stepData;
 };
 const init = () => {
@@ -467,12 +449,7 @@ const showAction = computed(() => {
 });
 
 const curFormConfig = computed(() => {
-  const stepData = allSteps.value.find(
-    (item) => item.taskName === curStep.value
-  );
-  if (!stepData) return [];
-
-  const formProperty = stepData.formProperty || [];
+  const formProperty = curStepData.value.formProperty || [];
   formProperty.forEach((item) => {
     if (IS_EDIT_MODE.value) {
       item.value = allFormData.value[item.formName];
@@ -480,7 +457,7 @@ const curFormConfig = computed(() => {
   });
 
   // 填报时第一步的特殊处理
-  if (stepData.setup === 1) {
+  if (curStepData.value.setup === 1) {
     // region_user_id_1 区域协调人
     // engineer_user_id_1 实施工程师
     // assistant_engineer_user_id_1 助理工程师
@@ -546,13 +523,15 @@ const toViewHistory = () => {
   stepHistoryShow.value = !stepHistoryShow.value;
 };
 
-const stepChange = () => {
+const switchStep = async (stepData) => {
   if (IS_EDIT_MODE.value) {
+    const valid = await form.value.validate();
+    if (valid !== true) return;
+
     allFormData.value = { ...allFormData.value, ...formData.value };
   }
-  const stepData = allSteps.value.find(
-    (item) => item.taskName === curStep.value
-  );
+
+  curStep = stepData.taskKey;
   curStepData.value = stepData;
 };
 
@@ -596,7 +575,7 @@ const getFormData = () => {
 const submitHandle = async (approve = 'START') => {
   if (approve !== 'DRAFT') {
     // 提交
-    const valid = await form.value[0].validate();
+    const valid = await form.value.validate();
     if (valid !== true) return;
 
     if (curStepData.value.setup !== 1) {