搜索详情

src/views/web/list/detail.vue

@@ -0,0 +1,103 @@
+<template>
+  <CusDialog
+    :show="show"
+    :title="titleCpt"
+    @onClose="$emit('update:show', false)"
+    width="90%"
+    height="auto"
+    max-height="90%"
+    :show-submit="false"
+  >
+    <div class="detail">
+      <template v-for="item in transfer.config">
+        <div class="detail-item">
+          <div class="detail-item-label"><div class="text">{{item.key}}</div></div>
+          <div class="detail-item-value">
+            <template v-if="item.isImg">
+              <div class="item-img">
+                <el-image
+                  :src="transfer.row?.[item.value]"
+                  :zoom-rate="1.2"
+                  :max-scale="7"
+                  :min-scale="0.2"
+                  :preview-src-list="[transfer.row?.[item.value]]"
+                  :preview-teleported="true"
+                />
+              </div>
+            </template>
+            <template v-else>{{transfer.row?.[item.value]}}</template>
+          </div>
+        </div>
+      </template>
+    </div>
+  </CusDialog>
+</template>
+
+<script setup lang="ts">
+import {computed, getCurrentInstance, nextTick, reactive, ref, watch} from "vue";
+
+const emit = defineEmits(['update:show', 'refresh'])
+const {proxy} = getCurrentInstance()
+const props = defineProps({
+  show: {default: false},
+  transfer: {}
+ })
+const state: any = reactive({
+  form: {},
+})
+const titleCpt = computed(() => {
+  let t = props.transfer.indexName + '详情'
+  return t
+})
+watch(() => props.show, (n) => {
+  if (n) {
+
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.detail {
+  width: 100%;
+  padding: 20px;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 30px;
+  .detail-item {
+    display: flex;
+    font-size: 14px;
+    line-height: 24px;
+    .detail-item-label {
+      width: 180px;
+      font-weight: bold;
+      color: var(--cus-text-color-1);
+      display: flex;
+      position: relative;
+      &:after {
+        content: '：';
+      }
+      .text {
+        margin-left: auto;
+        text-align: right;
+      }
+    }
+    .detail-item-value {
+      flex: 1;
+      font-weight: 400;
+      color: var(--cus-text-color-2);
+      text-align: justify;
+      .item-img {
+        width: 100%;
+        .el-image {
+          width: 100%;
+          height: 100%;
+          >img {
+            width: 100%;
+            height: 100%;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/web/list/index.vue

@@ -144,14 +144,14 @@
                         </div>
                       </template>
                     </div>
-<!--                    <div class="operation">-->
-<!--                      <div class="__hover">-->
-<!--                        <SvgIcon name="detail_1" color="var(&#45;&#45;cus-main-color)"/>详情-->
-<!--                      </div>-->
+                    <div class="operation">
+                      <div class="__hover" @click="state.ws.detail(item.esId)">
+                        <SvgIcon name="detail_1" color="var(--cus-main-color)"/>详情
+                      </div>
 <!--                      <div class="__hover">-->
 <!--                        <SvgIcon name="archives_1" color="var(&#45;&#45;cus-main-color)"/>档案-->
 <!--                      </div>-->
-<!--                    </div>-->
+                    </div>
                   </div>
                 </template>
               </div>
@@ -177,14 +177,14 @@
                         <div class="main-row-param">
                           <CusEllipsis :value="item[tableConfigCpt.cardMain.value]" :html="true"/>
                         </div>
-<!--                        <div class="main-row-operation">-->
-<!--                          <div class="__hover">-->
-<!--                            <SvgIcon name="detail_1" color="var(&#45;&#45;cus-main-color)"/>详情-->
-<!--                          </div>-->
+                        <div class="main-row-operation">
+                          <div class="__hover" @click="state.ws.detail(item.esId)">
+                            <SvgIcon name="detail_1" color="var(--cus-main-color)"/>详情
+                          </div>
 <!--                          <div class="__hover">-->
 <!--                            <SvgIcon name="archives_1" color="var(&#45;&#45;cus-main-color)"/>档案-->
 <!--                          </div>-->
-<!--                        </div>-->
+                        </div>
                       </div>
                       <div class="cols" :style="{
                       gridTemplateColumns: `repeat(${tableConfigCpt.cardCol}, 1fr)`
@@ -217,6 +217,7 @@
         </div>
       </div>
     </div>
+    <DetailCom v-model:show="state.detail.show" :transfer="state.detail.transfer"/>
   </div>
 </template>
 
@@ -226,6 +227,7 @@ import {useRoute, useRouter} from "vue-router";
 import {useAppStore, useDictionaryStore, useWebStore} from "@/stores";
 import {ElLoading, ElMessage} from "element-plus";
 import {frontGetIndexAndFieldInfo} from "@/api/modules/web/list";
+import DetailCom from './detail.vue'
 
 const {proxy} = getCurrentInstance()
 const AppStore = useAppStore()
@@ -259,6 +261,7 @@ const state: any = reactive({
   ws: {
     count: () => {},
     list: () => {},
+    detail: () => {},
     countPercent: 100
   },
   tableParams: {
@@ -268,6 +271,10 @@ const state: any = reactive({
     total: 0,
     data: [],
     loading: false
+  },
+  detail: {
+    transfer: {},
+    show: false
   }
 })
 const ref_area = ref()
@@ -292,9 +299,11 @@ const tableConfigCpt = computed(() => {
   const cardConfig = []
   let cardMain = {}
   let cardImg = {}
+  const detailConfig = []
   state.resultParams.indexConfig?.sysIndexFields?.forEach(v => {
+    const obj = {key: v.fieldNameCn, value: v.fieldNameEn, col: v.labelLength, isImg: v.pictureField == 1}
+    detailConfig.push(obj)
     if (v.searchShow == 1) {
-      const obj = {key: v.fieldNameCn, value: v.fieldNameEn, col: v.labelLength}
       listConfig.push(obj)
       if (state.resultParams.indexConfig?.pictureField && (state.resultParams.indexConfig?.pictureField == v.fieldNameEn)) {
         cardImg = JSON.parse(JSON.stringify(obj))
@@ -311,7 +320,8 @@ const tableConfigCpt = computed(() => {
     cardCol: state.resultParams.indexConfig.cardColumnNum,
     cardMain: cardMain,
     cardImg: cardImg,
-    cardConfig: cardConfig
+    cardConfig: cardConfig,
+    detailConfig: detailConfig
   }
   state.tableParams.model = state.resultParams.indexConfig.defModel === 'column_model' ? 'list' : 'card'
   console.log(res)
@@ -411,6 +421,7 @@ onMounted(() => {
       state.cascaderParams.value = index.split(',').map(v => Number(v))
     }
     let loading = null
+    let loadingTimer = null
     const ws: any = new WebSocket('/ws-api/smart-ws?userId=1388061846031220738')
     ws.onerror = () => {
       loading = ElLoading.service({
@@ -424,6 +435,7 @@ onMounted(() => {
     let lastCountStep = 0
     let lastCountStep_ = 0
     let lastListParams = ''
+    let lastDetailParams = ''
     ws.onopen = (e) => {
       state.ws.count = () => {
         state.ws.countPercent = 0
@@ -500,6 +512,36 @@ onMounted(() => {
         lastListParams = JSON.stringify(params)
         ws.send(lastListParams)
       }
+      state.ws.detail = (esId) => {
+        const params = {
+          indexCode: state.resultParams.activeIndex,
+          id: esId,
+          type: 'detail',
+          sessionId: sessionId,
+          timestamp: new Date().getTime(),
+          flag: 'run',
+          orderBy: {}
+        }
+        lastDetailParams = JSON.stringify(params)
+        ws.send(lastDetailParams)
+        loading = ElLoading.service({
+          lock: true,
+          text: '详情信息获取中……',
+          background: 'rgba(0, 0, 0, 0.7)',
+        })
+        if (loadingTimer) {
+          clearTimeout(loadingTimer)
+        }
+        loadingTimer = setTimeout(() => {
+          const errorParams = JSON.parse(JSON.stringify(lastDetailParams))
+          errorParams.flag = 'stop'
+          ws.send(errorParams)
+          lastDetailParams = ''
+          ElMessage.error('详情信息获取失败！')
+          loading?.close()
+          loadingTimer = null
+        }, 10000)
+      }
     }
     ws.onmessage = (e) => {
       try {
@@ -566,6 +608,23 @@ onMounted(() => {
                 lastListParams = ''
               }
             } break
+            case 'detail': {
+              const p = JSON.parse(lastDetailParams)
+              // 返回为最新批次的
+              if (json.timestamp == p.timestamp) {
+
+                clearTimeout(loadingTimer)
+                loadingTimer = null
+                loading?.close()
+                lastDetailParams = ''
+                state.detail.transfer = {
+                  indexName: currentIndexCpt.value.treeName,
+                  row: json.datas?.[0],
+                  config: tableConfigCpt.value.detailConfig
+                }
+                state.detail.show = true
+              }
+            } break
           }
         }
       } catch (e) {