first commit
This commit is contained in:
steven
248
src/views/DataAnalyse/diagram/components/DiagramTableFile.vue
Normal file
248
src/views/DataAnalyse/diagram/components/DiagramTableFile.vue
Normal file
@@ -0,0 +1,248 @@
|
||||
<template>
|
||||
<div class="table-container">
|
||||
<a-table
|
||||
:align="'center'"
|
||||
:columns="columns"
|
||||
:dataSource="tableSource"
|
||||
:scroll="{ x: 300, y: 400 }"
|
||||
rowKey="title"
|
||||
:pagination="finalPagination"
|
||||
class="ant-table-striped"
|
||||
:rowClassName="(record, index) => (index % 2 === 1 ? 'table-striped' : null)"
|
||||
@change="handleChange"
|
||||
|
||||
>
|
||||
<template #title="{ text }">
|
||||
<div class="diagram-filename" v-html="text"></div>
|
||||
</template>
|
||||
|
||||
<template #operation="{ record }">
|
||||
<a-button
|
||||
size="small"
|
||||
type="text"
|
||||
primary
|
||||
@click="openPreviewModal(record)"
|
||||
:disabled="record.type !== 'png' && record.type !== 'jpg' && record.type !== 'jpeg' && record.type !== 'gif'"
|
||||
>预览</a-button
|
||||
>
|
||||
<a-divider type="vertical" />
|
||||
<a-button
|
||||
size="small"
|
||||
type="text"
|
||||
primary
|
||||
@click="handleDownload(record)"
|
||||
>下载</a-button
|
||||
>
|
||||
</template>
|
||||
</a-table>
|
||||
<ImagePreview
|
||||
v-model:visible="previewVisible"
|
||||
:preview-info="previewInfo"
|
||||
:whole-data="tableSource"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent, ref, watch, inject, computed } from "vue";
|
||||
import { getFileExtension } from "@/utils/file";
|
||||
import { cloneDeep } from "lodash";
|
||||
import { downloadFile } from "@/views/DataAnalyse/composables/downloadFile";
|
||||
import { useStore } from "vuex";
|
||||
import { useRoute } from 'vue-router';
|
||||
import {
|
||||
downloadAllFile,
|
||||
downloadFileSheet,
|
||||
getDiagramAnalysis,
|
||||
} from "@/api/data-analyse";
|
||||
import { convertQueryToString } from "@/utils/httpFormat";
|
||||
|
||||
|
||||
import ImagePreview from "./ImagePreview";
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
sn: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
},
|
||||
components: { ImagePreview },
|
||||
setup(props) {
|
||||
const store = useStore()
|
||||
const route = useRoute();
|
||||
console.log('route',route);
|
||||
const querySn = computed(()=>route.query.sn)
|
||||
const tableInstance = inject("tableInstance");
|
||||
|
||||
const permission = inject("permission");
|
||||
const searchParams = inject("searchParams");
|
||||
|
||||
|
||||
|
||||
const tableSource = ref([]);
|
||||
const columns = ref([
|
||||
{
|
||||
title: "序号",
|
||||
key: "index",
|
||||
dataIndex: "index",
|
||||
width: 50,
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: () => (
|
||||
<span>
|
||||
附件
|
||||
<i
|
||||
class="iconfont icon-xiazai"
|
||||
style="color: #1C6FFF; cursor: pointer"
|
||||
onClick={handleClick}
|
||||
></i>
|
||||
</span>
|
||||
),
|
||||
key: "title",
|
||||
dataIndex: "title",
|
||||
slots: { customRender: "title" },
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
key: "operation",
|
||||
dataIndex: "operation",
|
||||
slots: { customRender: "operation" },
|
||||
width: 160,
|
||||
align: "center",
|
||||
},
|
||||
]);
|
||||
|
||||
const pagination = ref({
|
||||
size: "small",
|
||||
total: props.data.count,
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
hideOnSinglePage: true,
|
||||
showLessItems: true,
|
||||
});
|
||||
const finalPagination = computed(() => {
|
||||
return {
|
||||
...pagination.value,
|
||||
total: props.data.count
|
||||
}
|
||||
})
|
||||
async function handleClick() {
|
||||
const sn = props.sn;
|
||||
const question_index = props.data.question_index;
|
||||
const { data } = await downloadAllFile(
|
||||
sn,
|
||||
question_index,
|
||||
searchParams.value
|
||||
);
|
||||
const {title,url} = data.url;
|
||||
const subdata = {
|
||||
fileURL:url,
|
||||
fileName:title
|
||||
}
|
||||
store.dispatch('common/fileDown',subdata)
|
||||
}
|
||||
|
||||
const previewVisible = ref(false);
|
||||
const previewInfo = ref({
|
||||
type: null,
|
||||
});
|
||||
|
||||
//预览
|
||||
function openPreviewModal(row) {
|
||||
previewInfo.value = cloneDeep(row);
|
||||
previewVisible.value = true;
|
||||
}
|
||||
// 下载文件
|
||||
function handleDownload(record) {
|
||||
console.log('record',record);
|
||||
downloadFileSheet( querySn.value,record.answer, props.data.question_index).then(
|
||||
(res) => {
|
||||
const {title,url} = res.data.url;
|
||||
const subdata = {
|
||||
fileURL:url,
|
||||
fileName:title
|
||||
}
|
||||
store.dispatch('common/fileDown',subdata)
|
||||
}
|
||||
);
|
||||
}
|
||||
function getData() {
|
||||
let params = {
|
||||
...searchParams.value,
|
||||
question_index: props.data.question_index,
|
||||
blank_page: pagination.value.current,
|
||||
blank_per_page: 10,
|
||||
};
|
||||
params = convertQueryToString(params);
|
||||
console.log('params', params)
|
||||
getDiagramAnalysis(props.sn, params).then((res) => {
|
||||
const data = res.data?.[0] ?? {};
|
||||
tableInstance.value.data = data.option;
|
||||
tableSource.value = data.option.map((item) => {
|
||||
return {
|
||||
...item,
|
||||
type: getFileExtension(item.data[0].url),
|
||||
};
|
||||
});
|
||||
});
|
||||
}
|
||||
function handleChange(page, filters, sorter) {
|
||||
pagination.value.current = page.current;
|
||||
getData();
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.data,
|
||||
(data) => {
|
||||
tableInstance.value.data = data.option;
|
||||
tableInstance.value.columns = data.head;
|
||||
tableSource.value = data.option.map((item) => {
|
||||
return {
|
||||
...item,
|
||||
type: getFileExtension(item.data[0].url),
|
||||
};
|
||||
});
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
}
|
||||
);
|
||||
return {
|
||||
tableSource,
|
||||
columns,
|
||||
previewInfo,
|
||||
previewVisible,
|
||||
openPreviewModal,
|
||||
handleDownload,
|
||||
pagination,
|
||||
finalPagination,
|
||||
handleChange
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.diagram-filename {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
img {
|
||||
display: block;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.ant-table-striped :deep(.table-striped) td {
|
||||
background: #f6fbf2;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user