Files
ylst-pc/src/views/DataAnalyse/components/CustomTableHeaderCell.vue

143 lines
3.9 KiB
Vue

<template>
<div class="custom-head-cell">
<div class="image-question custom-table-head-img" v-if="[12, 13, 14].includes(question_type)" v-html="content"></div>
<a-tooltip placement="topLeft" v-else>
<template #title>
<div class="custom-head-preview" v-html="content"></div>
</template>
<div class="custom-head-main">
<!-- 下载题型-->
<div class="file-question" v-if="question_type === 18" :style="{width:data.width + 'px'}">
<div class="label">{{ content }}</div>
<i
class="iconfont icon-xiazai"
style="color: #70b936; cursor: pointer"
@click="download"
></i>
<!-- <a-button size="mini" @click="download">下载全部附件333</a-button>-->
</div>
<!-- 图文题-->
<div class="common-text" v-else>{{ content }}</div>
</div>
</a-tooltip>
<!-- 下载中心 -->
<DownloadCenter v-model:visible="downloadVisible" v-if="downloadVisible"></DownloadCenter>
</div>
</template>
<script setup>
import { ref, computed, watchEffect, defineProps } from "vue";
import { useStore } from 'vuex';
import { downloadAnswerFile } from '@api/data-analyse'
import { convertQueryToString } from "@utils/httpFormat";
import { downloadFile } from "@views/DataAnalyse/composables/downloadFile";
import { addDownloadCenter } from "@/api/download.js";
import { useRouter, useRoute } from "vue-router";
import DownloadCenter from "@/views/DownloadCenter/index.vue"
const store = useStore()
const props = defineProps({
data: {
type: Object
},
search_params: {
type: Object
},
sn: {
type: String
}
});
const content = ref('')
const question_index = ref(null)
const question_type = ref(null)
// https://stackoverflow.com/questions/15458876/check-if-a-string-is-html-or-not
const includeHtmlTag = computed(() =>/<\/?[a-z][\s\S]*>/i.test(content.value))
const shortTitle = computed(() => content.value ? content.value.slice(0, 40) : '')
const searchParams = ref({});
function download() {
const params = JSON.parse(JSON.stringify(props.search_params))
const query = convertQueryToString(params)
// console.log("serpar",params);
searchParams.value = params;
// downloadAnswerFile(props.sn, question_index.value, query).then(res => {
// // const url = res.data.url
// // downloadFile(url)
// const {title,url} = res.data.url
// const subdata = {
// fileURL:url,
// fileName:title
// }
// store.dispatch('common/fileDown',subdata)
// })
downloadCenter()
}
const router = useRouter();
const route = useRoute();
const downloadVisible = ref(false);
// 下载中心
function downloadCenter() {
let data ={ download_type: '3', question_index:question_index.value, ...searchParams.value }
addDownloadCenter(props.sn,data).then(res=>{
store.dispatch('downloadCenter/changeCenterUrl',route.path)
// downloadVisible.value = true
store.dispatch('downloadCenter/changeCenterShow',true)
// router.push({
// path: "/downloadCenter",
// query: { path:route.path,sn:props.sn },
// });
})
}
watchEffect(() => {
content.value = props.data.title
question_index.value = props.data.question_index
question_type.value = props.data.question_type
})
</script>
<style lang="scss">
.custom-table-head-img img {
width: 40px;
height: 40px;
}
</style>
<style lang="scss" scoped>
.custom-head-cell {
width: 100%;
.custom-head-main {
width: 100%;
display: flex;
align-items: center;
}
.file-question {
display: flex;
align-items: center;
.label {
width: 40%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.image-question {
display: flex;
align-items: center;
}
.common-text {
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.custom-head-preview {
display: flex;
align-items: center;
word-wrap: break-word;
}
}
</style>