bug fix

src/style/global.less

@@ -495,6 +495,7 @@ body {
     border: 1px solid @light-border-color;
     justify-content: space-between;
     align-items: stretch;
+    position: relative;
 
     .step-list-header {
       padding: 8px;
@@ -602,7 +603,7 @@ body {
 .sop-step-history {
   &-label {
     position: absolute;
-    z-index: 9;
+    z-index: 99;
     top: 24px;
     right: 24px;
     padding: 16px 12px;
@@ -623,7 +624,7 @@ body {
   }
   &-content {
     position: absolute;
-    z-index: 9;
+    z-index: 99;
     top: 24px;
     right: 70px;
     bottom: 89px;

src/views/sop/sop-manage/plan-change/index.vue

@@ -163,12 +163,70 @@
         <t-button theme="primary" @click="submitHandle">提交</t-button>
         <t-button theme="default" @click="cancelHandle">取消</t-button>
       </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>
+                {{ sopInfo.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>
+                </t-collapse-panel>
+              </t-collapse>
+            </div>
+          </div>
+        </transition>
+      </div>
     </div>
   </div>
 </template>
 <script setup name="PlanChange">
 import { ref, computed, reactive } from 'vue';
 import { MessagePlugin } from 'tdesign-vue-next';
+import {
+  ChevronLeftDoubleIcon,
+  ChevronRightDoubleIcon,
+} from 'tdesign-icons-vue-next';
 import dynamicTable from '@/components/common/dynamic-table/index.vue';
 import { dictToOptionList } from '@/utils/tool';
 import { PLAN_CHANGE_TYPE } from '@/config/constants';
@@ -179,6 +237,7 @@ import {
 } from '@/api/sop';
 import { omit } from 'lodash';
 import { timestampFilter } from '@/utils/filter';
+import { timeNumberToText } from '@/utils/tool';
 
 const props = defineProps({
   sop: {
@@ -195,6 +254,23 @@ const props = defineProps({
 const emit = defineEmits(['confirm', 'cancel']);
 
 const sopInfo = ref({ ...props.sop });
+const stepHistoryShow = ref(false);
+const flowApproveHistoryList = ref([]);
+const stepDuration = ref('');
+
+function getFlowApproveHistoryList(data) {
+  if (!data) return [];
+
+  let lastTime = 0;
+  return data.map((item, index) => {
+    let nitem = { ...item };
+    nitem.duration =
+      index === 0 ? '-' : timeNumberToText(item.createTime - lastTime);
+    lastTime = item.createTime;
+    nitem.taskName = item.approveRemark;
+    return nitem;
+  });
+}
 
 const IS_NEW_MODE = computed(() => {
   return props.type === 'new';
@@ -270,14 +346,18 @@ const initData = async () => {
   }
 
   // audit
-  const res = await planChangeDetail(props.sop.objId);
+  const res = await planChangeDetail(props.sop.id || props.sop.objId);
   sopInfo.value.beginTime = res.crmInfo.crmBeginTime;
   sopInfo.value.customManagerName = res.crmInfo.customManagerName;
   sopInfo.value.customManagerTypeStr = props.sop.customTypeStr;
-  sopInfo.value.examStartTime = '';
-  sopInfo.value.examEndTime = '';
+  sopInfo.value.examStartTime = res.crmInfo.examStartTime;
+  sopInfo.value.examEndTime = res.crmInfo.examEndTime;
   sopInfo.value.productName = res.crmInfo.productName;
 
+  flowApproveHistoryList.value = getFlowApproveHistoryList(
+    res.flowApproveHistoryList
+  );
+
   for (const key in res.tbProjectExchange) {
     if (Object.hasOwnProperty.call(formData, key)) {
       formData[key] = res.tbProjectExchange[key];
@@ -326,6 +406,10 @@ const rules = computed(() => {
   };
 });
 
+const toViewHistory = () => {
+  stepHistoryShow.value = !stepHistoryShow.value;
+};
+
 const submitHandle = async () => {
   const valid = await formRef.value.validate();
   if (valid !== true) return;

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

@@ -398,24 +398,16 @@ const initFill = async () => {
 };
 const initEdit = async () => {
   loading.value = true;
-  const flowRes = await sopFlowViewApi({ flowId });
-  crmInfo.value = flowRes.crmInfo;
-  updateSopInfo(crmInfo.value);
   const res = await sopEditApi(props.sop.id);
   loading.value = false;
-
-  // todo
-  // const res = await sopEditApi(props.sop.id);
-  // loading.value = false;
-  // crmInfo.value = res.crmInfo || {};
-  // updateSopInfo(crmInfo.value);
-
+  crmInfo.value = res.crmInfo || {};
+  updateSopInfo(crmInfo.value);
   sopEditDetail.value = res;
   allSteps.value = Object.values(res.setupMap).sort(
     (a, b) => a.setup - b.setup
   );
   flowApproveHistoryList.value = getFlowApproveHistoryList(
-    flowRes.flowApproveHistoryList,
+    res.flowApproveHistoryList,
     allSteps.value
   );
   let allFormMap = {};
@@ -536,7 +528,6 @@ watch(curFormConfig, (val) => {
 });
 
 const toViewHistory = () => {
-  console.log('11');
   stepHistoryShow.value = !stepHistoryShow.value;
 };