sgxt_web/src/views/backOfficeSystem/ApprovalInformation/Clue/index.vue

<template>
  <div class="" style="overflow: auto;height: 100%;">
    <el-card shadow="never" style="border: none;">
      <template #header>
        <h3 class="card-header">
          基础信息
        </h3>
      </template>
      <div class="flex  flex-warp just-between">
        <div class="flex flex-1" v-for="(item, index) in basicInformation" :key="index">
          <div class="lable">{{ item.label }}：</div>
          <div v-if="item.showSolt">
            <DictTag :tag="false" :value="listQuery[item.key]" color="#000" :options="item.options" />
          </div>
          <div v-else>
            {{ listQuery[item.key] }}
          </div>
        </div>
      </div>
    </el-card>
    <el-card shadow="never" style="border: none;">
      <template #header>
        <h3 class="card-header">
          相关人员
        </h3>
      </template>
      <ObjectInformation :item='listQuery' :dict="{ D_BZ_XB }" />
    </el-card>
    <el-card shadow="never" style="border: none;">
      <template #header>
        <h3 class="card-header">
          附件
        </h3>
      </template>
      <div class="grid-container">
        <div class="grid-item flex just-between" style="" v-for="(item, index) in srcList" :key="index">
          <div class="names">{{ item.name }}</div>
          <div  class="icon"><a :href="setAddress(item.id)" download><el-icon><Download /></el-icon></a></div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import ObjectInformation from './objectInformation.vue'
import { qcckGet } from '@/api/qcckApi'
import { onMounted, getCurrentInstance, ref, reactive } from 'vue'
import { useRoute } from 'vue-router'
import { setAddress } from '@/utils/tools'
const { proxy } = getCurrentInstance();
const { D_BZ_SF, D_BZ_XB, D_GS_XS_LY, D_BZ_SSZT, D_GS_XS_LX, D_GS_XS_QTLX } =
  proxy.$dict("D_BZ_SF", "D_BZ_XB", "D_GS_XS_LY", "D_BZ_SSZT", "D_GS_XS_LX", "D_GS_XS_QTLX"); //获取字典数据

// 基础信息
const basicInformation = ref(
  [
    {
      label: '线索名称',
      key: 'xsMc',
    },
    {
      label: '线索类型',
      key: 'xlLx',
      showSolt: true,
      options: D_GS_XS_LX
    },
    {
      label: '情报来源',
      key: 'qbLy',
      showSolt: true,
      options: D_GS_XS_LY
    },
    {
      label: '指向开始时间',
      key: 'zxkssj'
    },
    {
      label: '指向结束时间',
      key: 'zxjssj',

    },
    {
      label: '指向地点',
      key: 'zxdz',
    },
    {
      label: '所属专题',
      key: 'sszt',
      showSolt: true,
      options: D_BZ_SSZT
    }, {
      label: '线索内容',
      key: 'xsNr',
    },
  ]
)
//根据id获取数据query的id获取数据
const listQuery = ref({})
// 图片信息
const srcList = ref({})
const getDataById = (id) => {
  const params = { id }
  qcckGet(params, '/mosty-gsxt/qbcj/selectByid').then(res => {
    listQuery.value = res
    srcList.value = res.ossList

    // onSubmit(res.ossList)
  })
}
const route = useRoute()
onMounted(() => {
  const id = route.query.id
  getDataById(id)
})
// const onSubmit = async (val) => {
//   const data = []
//   for (let i = 0; i < val.length; i++) {
//     const res = await qcckGet({}, `/mosty-base/minio/file/download/${val[i].id}`)
//     data.push(res)
//   }

//   srcList.value = data.reduce((acc, file) => {
//     const { suffix, url } = file;
//     const name=  suffix.startsWith('.') ? suffix.substring(1) : suffix;
//     // 如果该后缀的分组不存在，则初始化
//     if (!acc[name]) {
//       acc[name] = [];
//     }
//     // 将当前文件的 url 推入对应分组的数组
//     acc[name].push(url);
//     return acc;
//   }, []);
//   console.log(srcList.value);

// }


</script>

<style lang="scss" scoped>
.card-header {
  font-size: 18px;
  color: #303133;
  font-weight: 600;
  margin: 0;
}

::v-deep .el-card {
  border: none !important;
}

.flex-1 {
  width: 48%;
  font-family: verdana;
  font-size: 14px;
  margin-bottom: 20px;

  .lable {
    font-size: 14px;
    width: 110px;
    font-weight: 700;
  }
}

.el-image {
  padding: 0 5px;
  max-width: 300px;
  max-height: 200px;
  width: 100%;
  height: 200px;
}

.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: var(--el-fill-color-light);
  color: var(--el-text-color-secondary);
  font-size: 30px;
  border: 1px solid silver;
  border-radius: 5px;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  /* 5等分列 */
  gap: 0px;
  width: 100%;
  box-sizing: border-box;
}

.grid-item {
  width: 290px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  height: 50px;
  border-radius: 5px;
  background-color: aliceblue;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  justify-content: space-between;
  align-items: center;
  img {
    width: 100%;
  }
}
.names{
  width: 80%;
   white-space: nowrap;      /* 禁止换行 */
  overflow: hidden;         /* 隐藏溢出内容 */
  text-overflow: ellipsis;  /* 显示省略号 */
}
.icon{
  text-align: right;
  font-size: 16px;
  cursor: pointer;
}
</style>