md

src/views/sop/sop-manage/quality-issue/index.vue

@@ -91,6 +91,59 @@
         <t-space v-else class="sop-step-footer" style="flex-direction: row">
           <t-button theme="primary" @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>
+              </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>
       </t-tab-panel>
     </t-tabs>
   </div>
@@ -98,6 +151,10 @@
 
 <script setup name="QualityIssue">
 import { ref, computed, watch, reactive } from 'vue';
+import {
+  ChevronLeftDoubleIcon,
+  ChevronRightDoubleIcon,
+} from 'tdesign-icons-vue-next';
 import {
   issuesFeedbackSaveApi,
   issuesFeedbackApproveApi,
@@ -106,6 +163,8 @@ import { flowFormPropertiesApi, sopFlowViewApi } from '@/api/sop';
 import { MessagePlugin } from 'tdesign-vue-next';
 import DynamicFormItem from '../../components/dynamic-form-item/index.vue';
 import { CUSTOMER_TYPE } from '@/config/constants';
+import { timeNumberToText } from '@/utils/tool';
+import { timestampFilter } from '@/utils/filter';
 
 const props = defineProps({
   sop: {
@@ -121,6 +180,29 @@ const props = defineProps({
 });
 const emit = defineEmits(['confirm', 'cancel']);
 
+const stepHistoryShow = ref(false);
+const flowApproveHistoryList = ref([]);
+function getFlowApproveHistoryList(data, allStepData) {
+  if (!data) return [];
+
+  let setupData = {};
+  allStepData.forEach((item) => {
+    setupData[item.setup] = item.taskName;
+  });
+  let lastTime = 0;
+  return data.map((item, index) => {
+    let nitem = { ...item };
+    nitem.duration =
+      index === 0 ? '-' : timeNumberToText(item.createTime - lastTime);
+    lastTime = item.createTime;
+    nitem.taskName = setupData[item.approveSetup];
+    return nitem;
+  });
+}
+const toViewHistory = () => {
+  stepHistoryShow.value = !stepHistoryShow.value;
+};
+
 const IS_NEW_MODE = computed(() => {
   return props.type === 'new';
 });
@@ -139,6 +221,7 @@ const sopInfo = reactive({
   crmNo: props.sop.crmNo,
   productName: props.sop.productName,
   crmName: props.sop.crmName,
+  statusStr: props.sop.statusStr,
 });
 
 const needValueCodes = [
@@ -241,6 +324,10 @@ const initFill = async () => {
       prop.value = prop.value ? JSON.parse(prop.value).value : null;
     });
   });
+  flowApproveHistoryList.value = getFlowApproveHistoryList(
+    res.flowApproveHistoryList,
+    allSteps.value
+  );
   loading.value = false;
 };