财务订单审核订单轨迹明细展示

src/views/finance/index.vue

@@ -614,14 +614,12 @@
         <el-table-column prop="optContent" label="变更内容"></el-table-column>
         <el-table-column prop="changeBefore" label="变更前">
           <template #default="scope">
-            <span v-if="scope.row.changeBefore">{{ scope.row.changeBefore }}</span>
-            <el-button v-else type="primary" link size="small" @click="viewDetail(scope.row)">查看明细</el-button>
+            <el-button  type="primary" link size="small" @click="viewDetail(scope.row)">查看明细</el-button>
           </template>
         </el-table-column>
         <el-table-column prop="changeAfter" label="变更后">
           <template #default="scope">
-            <span v-if="scope.row.changeAfter">{{ scope.row.changeAfter }}</span>
-            <el-button v-else type="primary" link size="small" @click="viewDetail(scope.row)">查看明细</el-button>
+            <el-button  type="primary" link size="small" @click="viewDetail(scope.row)">查看明细</el-button>
           </template>
         </el-table-column>
         <el-table-column prop="result" label="保司反馈"></el-table-column>
@@ -856,15 +854,7 @@ const handleTrack = (scope) => {
 const viewDetail = (row) => {
   myRouter.push({
     name: 'InsurancePolicyViewDetail',
-    query: {
-      module: row.module,
-      subModule: row.subModule,
-      optType: row.optType,
-      createBy: row.createBy,
-      createTime: row.createTime,
-      content: row.optContent,
-      obj: row.result
-    }
+    query: row,
   })
 }
 // 数据导出// 数据导出

src/views/insurancePolicy/viewDetail.vue

@@ -1,191 +1,38 @@
 <template>
-    <div class="viewDetail">
-        <el-descriptions :column="2">
-            <template #title>
-                <div class="title">
-                    <div class="icon">
-                        <el-icon><List /></el-icon>
-                    </div>
-                    <p>{{ detailData?.content }}</p>
-                </div>
-            </template>
-            <el-descriptions-item label="操作功能：" label-align="right" align="left" label-width="100">{{ moduleName }}</el-descriptions-item>
-            <el-descriptions-item label="操作类型：" label-align="right" align="left" label-width="100">{{ detailData?.optType==0?'订单创建':detailData?.optType==1?'报价':detailData?.optType==2?'补传影像':detailData?.optType==3?'调整特约':detailData?.optType==4?'修改折扣系数':detailData?.optType==5?'核保':detailData?.optType==6?'获取支付码':detailData?.optType==7?'撤销支付码':detailData?.optType==8?'下载电子保单':detailData?.optType==9?'同步订单':detailData?.optType==10?'订单编辑':'--' }}</el-descriptions-item>
-            <el-descriptions-item label="操作人：" label-align="right" align="left" label-width="100">{{ detailData?.createBy }}</el-descriptions-item>
-            <el-descriptions-item label="操作时间：" label-align="right" align="left" label-width="100">{{ detailData?.createTime }}</el-descriptions-item>
-        </el-descriptions>
-        <el-row :gutter="20" class="content">
-            <el-col :span="11">
-                <p>变更前</p>
-                <el-table
-                    v-if="detailData?.content == '特别约定'"
-                    :data="detailData?.list"
-                >
-                    <el-table-column prop="a" label="特约名称"></el-table-column>
-                    <el-table-column prop="b" label="编码"></el-table-column>
-                    <el-table-column prop="c" label="特别约定内容"></el-table-column>
-                </el-table>
-                <div v-else-if="detailData?.content == '报价方案'">
-                    <div class="flex-item">
-                        <span class="label">险种</span>
-                        <span class="value"></span>
-                    </div>
-                    <div class="flex-item">
-                        <span class="label">报价方案</span>
-                        <span class="value"></span>
-                    </div>
-                    <div class="flex-item">
-                        <span class="label">方案明细</span>
-                        <span class="value">
-                            <el-table
-                                :data="detailData?.list"
-                            >
-                                <el-table-column prop="a" label="险种"></el-table-column>
-                                <el-table-column prop="b" label="保额">
-                                    <template #default="scope">
-                                        <el-select v-model="scope.row.optionId">
-                                            <el-option label="1" value="1" key="1"></el-option>
-                                        </el-select>
-                                    </template>
-                                </el-table-column>
-                                <el-table-column prop="c" label="保费"></el-table-column>
-                            </el-table>
-                        </span>
-                    </div>
-                    <div class="flex-item">
-                        <span class="label">增值服务</span>
-                        <span class="value">
-                            <el-row :gutter="10">
-                                <el-col :span="6">
-                                    <span class="serve-item">
-                                        救援<a>2</a>次
-                                    </span>
-                                </el-col>
-                                <el-col :span="6">
-                                    <span class="serve-item">
-                                        检测<a>2</a>次
-                                    </span>
-                                </el-col>
-                                <el-col :span="6">
-                                    <span class="serve-item">
-                                        代驾<a>2</a>次
-                                    </span>
-                                </el-col>
-                                <el-col :span="6">
-                                    <span class="serve-item">
-                                        送检<a>2</a>次
-                                    </span>
-                                </el-col>
-                            </el-row>
-                        </span>
-                    </div>
-                    <div class="flex-item">
-                        <span class="label">驾意险</span>
-                        <span class="value">
-                            <el-table
-                                :data="detailData?.list"
-                            >
-                                <el-table-column prop="a" label="产品名称"></el-table-column>
-                                <el-table-column prop="b" label="数量"></el-table-column>
-                                <el-table-column prop="c" label="保费"></el-table-column>
-                            </el-table>
-                        </span>
-                    </div>
-                </div>
-                <div class="list" v-else>
-                    <el-row class="list-item" :gutter="20" v-for="item in detailData?.list" :key="item">
-                        <el-col :span="6">{{ item.propertyName }}</el-col>
-                        <el-col :span="18" style="color: #606266">{{ item.oldValue }}</el-col>
-                    </el-row>
-                </div>
-            </el-col>
-            <el-divider direction="vertical" style="height: 100%"></el-divider>
-            <el-col :span="11">
-                <p>变更后</p>
-                <el-table
-                    v-if="detailData?.content == '特别约定'"
-                    :data="detailData?.list"
-                >
-                    <el-table-column prop="a" label="特约名称"></el-table-column>
-                    <el-table-column prop="b" label="编码"></el-table-column>
-                    <el-table-column prop="c" label="特别约定内容"></el-table-column>
-                </el-table>
-                <div v-else-if="detailData?.content == '报价方案'">
-                    <div class="flex-item">
-                        <span class="label">险种</span>
-                        <span class="value"></span>
-                    </div>
-                    <div class="flex-item">
-                        <span class="label">报价方案</span>
-                        <span class="value"></span>
-                    </div>
-                    <div class="flex-item">
-                        <span class="label">方案明细</span>
-                        <span class="value">
-                            <el-table
-                                :data="detailData?.list"
-                            >
-                                <el-table-column prop="a" label="险种"></el-table-column>
-                                <el-table-column prop="b" label="保额">
-                                    <template #default="scope">
-                                        <el-select v-model="scope.row.optionId">
-                                            <el-option label="1" value="1" key="1"></el-option>
-                                        </el-select>
-                                    </template>
-                                </el-table-column>
-                                <el-table-column prop="c" label="保费"></el-table-column>
-                            </el-table>
-                        </span>
-                    </div>
-                    <div class="flex-item">
-                        <span class="label">增值服务</span>
-                        <span class="value">
-                            <el-row :gutter="10">
-                                <el-col :span="6">
-                                    <span class="serve-item">
-                                        救援<a>2</a>次
-                                    </span>
-                                </el-col>
-                                <el-col :span="6">
-                                    <span class="serve-item">
-                                        检测<a>2</a>次
-                                    </span>
-                                </el-col>
-                                <el-col :span="6">
-                                    <span class="serve-item">
-                                        代驾<a>2</a>次
-                                    </span>
-                                </el-col>
-                                <el-col :span="6">
-                                    <span class="serve-item">
-                                        送检<a>2</a>次
-                                    </span>
-                                </el-col>
-                            </el-row>
-                        </span>
-                    </div>
-                    <div class="flex-item">
-                        <span class="label">驾意险</span>
-                        <span class="value">
-                            <el-table
-                                :data="detailData?.list"
-                            >
-                                <el-table-column prop="a" label="产品名称"></el-table-column>
-                                <el-table-column prop="b" label="数量"></el-table-column>
-                                <el-table-column prop="c" label="保费"></el-table-column>
-                            </el-table>
-                        </span>
-                    </div>
-                </div>
-                <div class="list" v-else>
-                    <el-row class="list-item" :gutter="20" v-for="item in detailData?.list" :key="item">
-                        <el-col :span="6">{{ item.propertyName }}</el-col>
-                        <el-col :span="18" style="color: #606266">{{ item.newValue }}</el-col>
-                    </el-row>
-                </div>
-            </el-col>
-        </el-row>
-    </div>
+  <div class="viewDetail">
+    <el-descriptions :column="2">
+      <template #title>
+        <div class="title">
+          <div class="icon">
+            <el-icon>
+              <List />
+            </el-icon>
+          </div>
+          <p>{{ detailData?.content }}</p>
+        </div>
+      </template>
+      <el-descriptions-item label="操作功能：" label-align="right" align="left" label-width="100">{{ moduleName
+      }}</el-descriptions-item>
+      <el-descriptions-item label="操作类型：" label-align="right" align="left" label-width="100">{{ optTypeMAP(detailData?.optType) }}</el-descriptions-item>
+      <el-descriptions-item label="操作人：" label-align="right" align="left" label-width="100">{{ detailData?.createBy
+      }}</el-descriptions-item>
+      <el-descriptions-item label="操作时间：" label-align="right" align="left" label-width="100">{{ detailData?.createTime
+      }}</el-descriptions-item>
+    </el-descriptions>
+    <el-row :gutter="20" class="content">
+      <el-col :span="11">
+        <p>变更前</p>
+        <div class="p-[20px]" v-html="formatLineBreaks(detailData?.changeBefore)"
+          style="white-space: pre-wrap; line-height: 2;"></div>
+      </el-col>
+      <el-divider direction="vertical" style="height: 100%"></el-divider>
+      <el-col :span="11">
+        <p>变更后</p>
+        <div class="p-[20px]" v-html="formatLineBreaks(detailData?.changeAfter)"
+          style="white-space: pre-wrap; line-height: 2;"></div>
+      </el-col>
+    </el-row>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -201,109 +48,161 @@ let detailData = ref(undefined)
 
 let moduleName = ref('')
 
-const JSONChange = (data) => {
-    try {
-        JSON.parse(data);
-        return true; // 如果没有抛出异常，说明可以解析
-    } catch (error) {
-        return false; // 如果抛出异常，说明不能解析
-    }
+// 格式化换行符,将 \r\n 和 \r 统一转换为 \n
+const formatLineBreaks = (text) => {
+  if (!text) return ''
+  return String(text).replace(/\r\n/g, '\n').replace(/\r/g, '\n')
 }
 
+const JSONChange = (data) => {
+  try {
+    JSON.parse(data);
+    return true; // 如果没有抛出异常，说明可以解析
+  } catch (error) {
+    return false; // 如果抛出异常，说明不能解析
+  }
+}
+const optTypeMAP = (optType) => {
+  switch (optType) {
+    case '0':
+      return '订单创建'
+    case '1':
+      return '报价'
+    case '2':
+      return '补传影像'
+    case '3':
+      return '调整特约'
+    case '4':
+      return '修改折扣系数'
+    case '5':
+      return '核保'
+    case '6':
+      return '获取支付码'
+    case '7':
+      return '撤销支付码'
+    case '8':
+      return '下载电子保单'
+    case '9':
+      return '同步订单'
+    case '10':
+      return '订单编辑'
+    case '11':
+      return '提交批改申请'
+    case '12':
+      return '审核批改申请'
+    case '13':
+      return '撤销批改申请'
+    case '14':
+      return '订单审核'
+    case '15':
+      return '费用调整'
+    case '16':
+      return '批量修改比例'
+    case '17':
+      return '设为疑问订单'
+    default:
+      return '--'
+  }
+}
 onBeforeMount(() => {
-    detailData.value = {
-        module: myRoute.query.module,
-        subModule: myRoute.query.subModule,
-        optType: myRoute.query.optType,
-        createTime: myRoute.query.createTime,
-        createBy: myRoute.query.createBy,
-        content: myRoute.query.content,
-        list: JSONChange(myRoute.query.obj)?JSON.parse(myRoute.query.obj):myRoute.query.obj
-    }
-    if(detailData.value.module && detailData.value.subModule) {
-        moduleName.value = `${detailData.value.module}/${detailData.value.subModule}`
-    } else if(detailData.value.module) {
-        moduleName.value = detailData.value.module
-    } else {
-        moduleName.value = ''
-    }
+  console.log(myRoute.query)
+
+  detailData.value = myRoute.query;
+  console.log(detailData.value)
+  if (detailData.value.module && detailData.value.subModule) {
+    moduleName.value = `${detailData.value.module}/${detailData.value.subModule}`
+  } else if (detailData.value.module) {
+    moduleName.value = detailData.value.module
+  } else {
+    moduleName.value = ''
+  }
 })
 
 const handleEscKey = (event: KeyboardEvent) => {
-    if (event.key === 'Escape' || event.keyCode === 27) {
-        myRouter.back()
-    }
+  if (event.key === 'Escape' || event.keyCode === 27) {
+    myRouter.back()
+  }
 }
 
 onMounted(() => {
-    window.addEventListener('keydown', handleEscKey)
+  window.addEventListener('keydown', handleEscKey)
 })
 
 onUnmounted(() => {
-    window.removeEventListener('keydown', handleEscKey)
+  window.removeEventListener('keydown', handleEscKey)
 })
 
 </script>
 
 <style scoped lang="scss">
-.viewDetail{
-    padding: 24px;
-    background: #FFFFFF;
-    width: 100%;
-    height: calc(100vh - 120px);
-    overflow: hidden;
-    .title{
-        display: flex;
-        align-items: center;
-        justify-content: flex-start;
-        .icon{
-            width: 30px;
-            height: 30px;
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            background: #1A85FA;
-            color: #FFFFFF;
-            font-size: 20px;
-            margin-right: 10px;
-        }
+.viewDetail {
+  padding: 24px;
+  background: #FFFFFF;
+  width: 100%;
+  height: calc(100vh - 120px);
+  overflow: hidden;
+
+  .title {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+
+    .icon {
+      width: 30px;
+      height: 30px;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: #1A85FA;
+      color: #FFFFFF;
+      font-size: 20px;
+      margin-right: 10px;
     }
-    .content{
-        height: calc(100% - 120px);
-        overflow-y: auto;
-        p{
-            text-align: center;
-            background: #F0F0F0;
-            margin: 0;
-            padding: 16px 0;
-        }
-        .list{
-            height: calc(100% - 80px);
-            overflow-y: auto;
-            overflow-x: hidden;
-            .list-item{
-                margin: 14px 0;
-                padding: 0 20px;
-                display: flex;
-            }
-        }
-        .flex-item{
-            display: flex;
-            align-items: center;
-            justify-content: flex-start;
-            margin: 14px 0;
-            .label{
-                width: 100px;
-                flex-shrink: 0;
-            }
-            .value{
-                width: calc(100% - 100px);
-            }
-        }
+  }
+
+  .content {
+    height: calc(100% - 120px);
+    overflow-y: auto;
+
+    p {
+      text-align: center;
+      background: #F0F0F0;
+      margin: 0;
+      padding: 16px 0;
     }
-    :deep(.el-descriptions) {
-        width: 50%;
+
+    .list {
+      height: calc(100% - 80px);
+      overflow-y: auto;
+      overflow-x: hidden;
+
+      .list-item {
+        margin: 14px 0;
+        padding: 0 20px;
+        display: flex;
+      }
     }
+
+    .flex-item {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      margin: 14px 0;
+
+      .label {
+        width: 100px;
+        flex-shrink: 0;
+      }
+
+      .value {
+        width: calc(100% - 100px);
+      }
+    }
+  }
+
+  :deep(.el-descriptions) {
+    width: 50%;
+  }
 }
 </style>