wangqing
5 years ago
9 changed files with 536 additions and 430 deletions
@ -0,0 +1,65 @@ |
|||||
|
<template> |
||||
|
<el-dialog |
||||
|
title="提示" |
||||
|
:visible.sync="dialogVisible" |
||||
|
:before-close="handleClose" |
||||
|
width="30%" |
||||
|
> |
||||
|
<p style="text-align: center; color: #a1a1a1;">{{ percentage >= 100 ? completeMessage : message }}</p> |
||||
|
<el-progress :percentage="percentage" /> |
||||
|
<el-link v-if="downloadUrl" :href="downloadUrl" type="primary"> |
||||
|
下载地址 |
||||
|
</el-link> |
||||
|
</el-dialog> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'HandleProcess', |
||||
|
props: {}, |
||||
|
data() { |
||||
|
return { |
||||
|
completeMessage: '已完成', |
||||
|
message: '处理中', |
||||
|
downloadUrl: '', |
||||
|
key: '', |
||||
|
timer: null, |
||||
|
percentage: 0, |
||||
|
dialogVisible: true |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
this.getHandleProcess() |
||||
|
this.timer = setInterval(() => { |
||||
|
this.getHandleProcess() |
||||
|
}, 5000) |
||||
|
}, |
||||
|
destroyed() { |
||||
|
clearInterval(this.timer) |
||||
|
}, |
||||
|
methods: { |
||||
|
/** |
||||
|
* 获取处理进去 |
||||
|
*/ |
||||
|
getHandleProcess() { |
||||
|
this.$api.get(`/common/process?key=${this.key}`).then(res => { |
||||
|
let {rate, url} = res.data |
||||
|
if (rate) { |
||||
|
this.percentage = rate |
||||
|
} |
||||
|
if (url) { |
||||
|
this.downloadUrl = url |
||||
|
clearInterval(this.timer) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
handleClose() { |
||||
|
clearInterval(this.timer) |
||||
|
this.$destroy(true) |
||||
|
this.$el.parentNode.removeChild(this.$el) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
</script> |
||||
|
|
||||
@ -0,0 +1,19 @@ |
|||||
|
// 参考文章
|
||||
|
// https://www.jianshu.com/p/514122716e38
|
||||
|
// https://www.cnblogs.com/shandou/p/13812538.html
|
||||
|
import Vue from 'vue' // 引入 Vue 是因为要用到 Vue.extend() 这个方法
|
||||
|
import process from './index.vue' // 引入刚才的 toast 组件
|
||||
|
|
||||
|
let processConstructor = Vue.extend(process) |
||||
|
let instance |
||||
|
|
||||
|
const Process = function(options = {}) { |
||||
|
instance = new processConstructor({ |
||||
|
data: options // 这里的 data 会传到 message.vue 组件中的 data 中，当然也可以写在 props 里
|
||||
|
}) |
||||
|
document.body.appendChild(instance.$mount().$el) // 挂载到 body 下
|
||||
|
Vue.nextTick(() => { |
||||
|
instance.visible = true |
||||
|
}) |
||||
|
} |
||||
|
export default Process |
||||
@ -1,339 +1,44 @@ |
|||||
<template> |
<template> |
||||
<div class="statistics-container"> |
<div class="statistics-tabs"> |
||||
<div class="filter-table-view"> |
<el-tabs v-model="activeName" type="border-card"> |
||||
<el-form ref="filterForm" :inline="true"> |
<el-tab-pane label="列表视图" name="list"> |
||||
<el-form-item label="提交时间" prop="endDateTime"> |
<list /> |
||||
<el-date-picker |
</el-tab-pane> |
||||
v-model="queryConditions.beginDateTime" |
<el-tab-pane label="统计视图" name="chart"> |
||||
placeholder="开始时间" |
<chart /> |
||||
type="datetime" |
</el-tab-pane> |
||||
value-format="yyyy-MM-dd HH:mm:ss" |
</el-tabs> |
||||
/> |
|
||||
<span> 至 </span> |
|
||||
<el-date-picker |
|
||||
v-model="queryConditions.endDateTime" |
|
||||
:default-time="'23:59:59'" |
|
||||
placeholder="结束时间" |
|
||||
type="datetime" |
|
||||
value-format="yyyy-MM-dd HH:mm:ss" |
|
||||
/> |
|
||||
</el-form-item> |
|
||||
<el-form-item> |
|
||||
<el-button type="primary" @click="queryProjectResult">查询</el-button> |
|
||||
<el-button type="primary" @click="customFilterDialogVisible=true">条件</el-button> |
|
||||
<el-button type="success" @click="exportProjectResult">导出</el-button> |
|
||||
<el-button type="success" @click="exportProjectResult">下载附件</el-button> |
|
||||
</el-form-item> |
|
||||
</el-form> |
|
||||
</div> |
|
||||
<div class="result-table-view"> |
|
||||
<el-table |
|
||||
:data="projectResultList" |
|
||||
header-cell-class-name="data-table-header" |
|
||||
stripe |
|
||||
@row-dblclick="(row, column, event)=>{ |
|
||||
this.openDetailDrawerHandle(row) |
|
||||
}" |
|
||||
> |
|
||||
<el-table-column |
|
||||
type="selection" |
|
||||
width="55" |
|
||||
/> |
|
||||
<el-table-column |
|
||||
v-for="col in fixedCustomColumns" :key="`t${col}`" |
|
||||
:label="fixedDefaultLabelFormColumn[col]" |
|
||||
> |
|
||||
<template slot-scope="scope"> |
|
||||
{{ scope.row[col] }} |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column |
|
||||
v-for="col in otherCustomColumns" |
|
||||
:key="col" :label="projectItemColumns[col]" |
|
||||
show-overflow-tooltip |
|
||||
> |
|
||||
<template slot-scope="scope"> |
|
||||
{{ scope.row['processData'][col] }} |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column |
|
||||
:render-header="renderHeader" |
|
||||
fixed="right" |
|
||||
width="50" |
|
||||
> |
|
||||
<template slot-scope="scope"> |
|
||||
<el-button size="small" type="text" @click="openDetailDrawerHandle(scope.row)">查看</el-button> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
</el-table> |
|
||||
<el-drawer |
|
||||
v-if="activeResultRow" |
|
||||
:visible.sync="detailDrawer" |
|
||||
:with-header="false" |
|
||||
> |
|
||||
<el-scrollbar style="height: 100%;"> |
|
||||
<el-card class="detail-container"> |
|
||||
<div slot="header" class="clearfix"> |
|
||||
<span>提交详情</span> |
|
||||
</div> |
|
||||
<div> |
|
||||
<div v-for="item in projectItemList" :key="item.id"> |
|
||||
<h4>{{ item.label }}</h4> |
|
||||
<result-item :field-item-id="item.formItemId" :project-item-data="item" |
|
||||
:result-data="activeResultRow" |
|
||||
/> |
|
||||
<el-divider /> |
|
||||
</div> |
|
||||
</div> |
|
||||
</el-card> |
|
||||
</el-scrollbar> |
|
||||
</el-drawer> |
|
||||
<div style="display: flex; justify-content: center; margin-top: 10px;"> |
|
||||
<el-pagination |
|
||||
v-if="total>10" |
|
||||
:current-page.sync="queryConditions.current" |
|
||||
:page-size.sync="queryConditions.size" |
|
||||
:total="total" |
|
||||
background |
|
||||
layout="total, prev, pager, next" |
|
||||
@current-change="queryProjectResult" |
|
||||
/> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="custom-col-container"> |
|
||||
<el-dialog :visible.sync="customColumnDialogVisible" center title="自定义显示列"> |
|
||||
<el-row> |
|
||||
<el-col :span="3"> |
|
||||
<span>显示列：</span> |
|
||||
</el-col> |
|
||||
</el-row> |
|
||||
<el-divider /> |
|
||||
<el-checkbox-group v-model="checkedFixedCustomColumns"> |
|
||||
<el-row> |
|
||||
<el-col v-for="(val, key) in fixedDefaultLabelFormColumn" :key="key" :span="4"> |
|
||||
<el-checkbox :label="key">{{ val }}</el-checkbox> |
|
||||
</el-col> |
|
||||
</el-row> |
|
||||
</el-checkbox-group> |
|
||||
<el-divider /> |
|
||||
<el-checkbox-group v-model="checkOtherCustomColumns"> |
|
||||
<el-row> |
|
||||
<el-col v-for="(val, key) in projectItemColumns" :key="key" :span="8"> |
|
||||
<el-checkbox :label="key">{{ val }}</el-checkbox> |
|
||||
</el-col> |
|
||||
</el-row> |
|
||||
</el-checkbox-group> |
|
||||
<span slot="footer" class="dialog-footer"> |
|
||||
<el-button @click="customColumnDialogVisible = false">取 消</el-button> |
|
||||
<el-button type="primary" @click="saveStatisticsCheckedColumns">确 定</el-button> |
|
||||
</span> |
|
||||
</el-dialog> |
|
||||
</div> |
|
||||
<el-dialog :visible.sync="customFilterDialogVisible" center title="结构化筛选"> |
|
||||
<div class="flex-center"> |
|
||||
<el-transfer |
|
||||
v-model="checkedFilterColumns" |
|
||||
filterable |
|
||||
:props="{ |
|
||||
key: 'formItemId', |
|
||||
label: 'label' |
|
||||
}" |
|
||||
filter-placeholder="请输入问题名称" |
|
||||
:data="projectItemList" |
|
||||
/> |
|
||||
</div> |
|
||||
<span slot="footer" class="dialog-footer"> |
|
||||
<el-button @click="customColumnDialogVisible = false">取 消</el-button> |
|
||||
<el-button type="primary" @click="saveStatisticsCheckedColumns">确 定</el-button> |
|
||||
</span> |
|
||||
</el-dialog> |
|
||||
</div> |
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
import _ from 'lodash' |
import list from './list' |
||||
import ResultItem from './item' |
import chart from './chart' |
||||
import {getCheckedColumn, saveCheckedColumn} from '@/utils/db' |
|
||||
|
|
||||
const fixedDefaultFormColumn = ['serialNumber', 'submitAddress', 'createTime'] |
|
||||
const fixedDefaultLabelFormColumn = {serialNumber: '提交序号', submitAddress: '提交地址', createTime: '提交时间'} |
|
||||
|
|
||||
export default { |
export default { |
||||
name: 'ProjectStatistics', |
name: 'ProjectStatistics', |
||||
components: { |
components: { |
||||
ResultItem |
list, |
||||
|
chart |
||||
}, |
}, |
||||
data() { |
data() { |
||||
return { |
return { |
||||
projectKey: null, |
activeName: 'chart' |
||||
customFilterDialogVisible: false, |
|
||||
customColumnDialogVisible: false, |
|
||||
checkedFilterColumns: [], |
|
||||
// 固定自定义列 如序号等 |
|
||||
fixedCustomColumns: fixedDefaultFormColumn, |
|
||||
// 选中的 |
|
||||
checkedFixedCustomColumns: fixedDefaultFormColumn, |
|
||||
fixedDefaultLabelFormColumn: fixedDefaultLabelFormColumn, |
|
||||
// 自定义表单属性 |
|
||||
checkOtherCustomColumns: [], |
|
||||
otherCustomColumns: [], |
|
||||
projectResultList: [], |
|
||||
projectItemList: [], |
|
||||
projectData: null, |
|
||||
projectItemColumns: {}, |
|
||||
total: 0, |
|
||||
detailDrawer: false, |
|
||||
activeResultRow: null, |
|
||||
// 查询条件 |
|
||||
queryConditions: { |
|
||||
current: 1, |
|
||||
size: 10, |
|
||||
projectKey: '', |
|
||||
beginDateTime: '', |
|
||||
endDateTime: '' |
|
||||
} |
|
||||
} |
} |
||||
}, |
}, |
||||
mounted() { |
mounted() { |
||||
this.projectKey = this.$route.query.key |
|
||||
this.queryConditions.projectKey = this.projectKey |
|
||||
this.queryProjectResult() |
|
||||
this.queryProjectItems() |
|
||||
this.queryProject() |
|
||||
}, methods: { |
|
||||
renderHeader() { |
|
||||
return ( |
|
||||
<i class="el-icon-setting" style="color:currentColor" |
|
||||
onClick={() => this.customColumnDialogVisible = true}></i> |
|
||||
) |
|
||||
}, |
|
||||
|
|
||||
openDetailDrawerHandle(row) { |
}, methods: {} |
||||
this.activeResultRow = row |
|
||||
this.detailDrawer = true |
|
||||
}, |
|
||||
queryProject() { |
|
||||
this.$api.get(`/user/project/${this.projectKey}`).then(res => { |
|
||||
this.projectData = res.data |
|
||||
}) |
|
||||
}, |
|
||||
queryProjectResult() { |
|
||||
this.$api.get('/user/project/result/page', {params: this.queryConditions}).then(res => { |
|
||||
let {records, total, size} = res.data |
|
||||
this.projectResultList = records |
|
||||
this.total = total |
|
||||
this.queryConditions.size = size |
|
||||
}) |
|
||||
}, |
|
||||
saveStatisticsCheckedColumns() { |
|
||||
this.customColumnDialogVisible = false |
|
||||
this.fixedCustomColumns = this.checkedFixedCustomColumns |
|
||||
this.otherCustomColumns = this.checkOtherCustomColumns |
|
||||
saveCheckedColumn(this.projectKey, { |
|
||||
fixedCustomColumns: this.fixedCustomColumns, |
|
||||
otherCustomColumns: this.otherCustomColumns |
|
||||
}) |
|
||||
}, |
|
||||
getDbCheckedColumns() { |
|
||||
let checkedColumn = getCheckedColumn(this.projectKey) |
|
||||
if (!checkedColumn) { |
|
||||
return |
|
||||
} |
|
||||
let {fixedCustomColumns, otherCustomColumns} = checkedColumn |
|
||||
if (fixedCustomColumns) { |
|
||||
this.fixedCustomColumns = fixedCustomColumns |
|
||||
this.checkedFixedCustomColumns = fixedCustomColumns |
|
||||
} |
|
||||
if (otherCustomColumns) { |
|
||||
this.otherCustomColumns = otherCustomColumns |
|
||||
this.checkOtherCustomColumns = otherCustomColumns |
|
||||
} |
|
||||
}, |
|
||||
exportProjectResult() { |
|
||||
if (!this.total) { |
|
||||
this.$message.error('无表单有效反馈结果，无法导出') |
|
||||
return |
|
||||
} |
|
||||
this.$api.get('user/project/result/export', { |
|
||||
params: this.queryConditions, |
|
||||
responseType: 'blob' |
|
||||
}).then(res => { |
|
||||
let blob = res |
|
||||
let downloadElement = document.createElement('a') |
|
||||
let href = window.URL.createObjectURL(blob) // 创建下载的链接 |
|
||||
downloadElement.href = href |
|
||||
downloadElement.download = this.projectData.name + this.$dayjs().format('YYYYMMDDHHMM') + '.xls' // 下载后文件名 |
|
||||
document.body.appendChild(downloadElement) |
|
||||
downloadElement.click() // 点击下载 |
|
||||
document.body.removeChild(downloadElement) // 下载完成移除元素 |
|
||||
window.URL.revokeObjectURL(href) // 释放掉blob对象 |
|
||||
}) |
|
||||
}, |
|
||||
queryProjectItems() { |
|
||||
this.$api.get('/user/project/item/list', {params: {key: this.projectKey, displayType: false}}).then(res => { |
|
||||
if (res.data) { |
|
||||
res.data.map(item => { |
|
||||
_.set(this.projectItemColumns, `field${item.formItemId}`, item.label) |
|
||||
}) |
|
||||
} |
|
||||
this.projectItemList = res.data |
|
||||
this.getDbCheckedColumns() |
|
||||
}) |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
} |
} |
||||
</script> |
</script> |
||||
|
|
||||
<style scoped> |
<style scoped> |
||||
.statistics-container { |
.statistics-tabs { |
||||
|
padding: 20px; |
||||
width: 100%; |
width: 100%; |
||||
height: 100%; |
height: 100%; |
||||
padding-top: 30px; |
.el-tab-pane { |
||||
min-height: 85vh; |
height: 100%; |
||||
background-color: #f7f7f7; |
} |
||||
} |
|
||||
.custom-col-container >>> .el-checkbox__label { |
|
||||
width: 200px; |
|
||||
min-height: 25px; |
|
||||
line-height: 25px; |
|
||||
vertical-align: middle; |
|
||||
overflow: hidden; |
|
||||
white-space: nowrap; |
|
||||
text-overflow: ellipsis; |
|
||||
} |
|
||||
.result-table-view { |
|
||||
width: 80%; |
|
||||
margin: 6px auto; |
|
||||
} |
|
||||
.detail-container { |
|
||||
padding: 20px; |
|
||||
height: 100% !important; |
|
||||
} |
|
||||
.filter-table-view { |
|
||||
width: 80%; |
|
||||
margin: 0 auto; |
|
||||
} |
|
||||
::v-deep .el-icon-setting { |
|
||||
font-size: 24px; |
|
||||
line-height: 25px; |
|
||||
color: white; |
|
||||
} |
|
||||
::v-deep .data-table-header .cell { |
|
||||
text-overflow: ellipsis !important; |
|
||||
white-space: nowrap !important; |
|
||||
} |
|
||||
|
|
||||
/* 1.显示滚动条：当内容超出容器的时候，可以拖动： */ |
|
||||
::v-deep .el-drawer__body { |
|
||||
overflow: auto; |
|
||||
|
|
||||
/* overflow-x: auto; */ |
|
||||
} |
|
||||
|
|
||||
/* 2.隐藏滚动条，太丑了 */ |
|
||||
::v-deep .el-drawer__container ::-webkit-scrollbar { |
|
||||
display: none; |
|
||||
} |
} |
||||
|
|
||||
</style> |
</style> |
||||
|
|||||
@ -0,0 +1,350 @@ |
|||||
|
<template> |
||||
|
<div class="statistics-container"> |
||||
|
<div class="filter-table-view"> |
||||
|
<el-form ref="filterForm" :inline="true"> |
||||
|
<el-form-item label="提交时间" prop="endDateTime"> |
||||
|
<el-date-picker |
||||
|
v-model="queryConditions.beginDateTime" |
||||
|
placeholder="开始时间" |
||||
|
type="datetime" |
||||
|
value-format="yyyy-MM-dd HH:mm:ss" |
||||
|
/> |
||||
|
<span> 至 </span> |
||||
|
<el-date-picker |
||||
|
v-model="queryConditions.endDateTime" |
||||
|
:default-time="'23:59:59'" |
||||
|
placeholder="结束时间" |
||||
|
type="datetime" |
||||
|
value-format="yyyy-MM-dd HH:mm:ss" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item> |
||||
|
<el-button type="primary" @click="queryProjectResult">查询</el-button> |
||||
|
<el-button type="primary" @click="customFilterDialogVisible=true">条件</el-button> |
||||
|
<el-button type="success" @click="exportProjectResult">导出</el-button> |
||||
|
<el-button type="success" @click="downloadProjectResultFile">下载附件</el-button> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
<div class="result-table-view"> |
||||
|
<el-table |
||||
|
:data="projectResultList" |
||||
|
header-cell-class-name="data-table-header" |
||||
|
stripe |
||||
|
@row-dblclick="(row, column, event)=>{ |
||||
|
this.openDetailDrawerHandle(row) |
||||
|
}" |
||||
|
> |
||||
|
<el-table-column |
||||
|
type="selection" |
||||
|
width="55" |
||||
|
/> |
||||
|
<el-table-column |
||||
|
v-for="col in fixedCustomColumns" :key="`t${col}`" |
||||
|
:label="fixedDefaultLabelFormColumn[col]" |
||||
|
> |
||||
|
<template slot-scope="scope"> |
||||
|
{{ scope.row[col] }} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
v-for="col in otherCustomColumns" |
||||
|
:key="col" :label="projectItemColumns[col]" |
||||
|
show-overflow-tooltip |
||||
|
> |
||||
|
<template slot-scope="scope"> |
||||
|
{{ scope.row['processData'][col] }} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
:render-header="renderHeader" |
||||
|
fixed="right" |
||||
|
width="50" |
||||
|
> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-button size="small" type="text" @click="openDetailDrawerHandle(scope.row)">查看</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<el-drawer |
||||
|
v-if="activeResultRow" |
||||
|
:visible.sync="detailDrawer" |
||||
|
:with-header="false" |
||||
|
> |
||||
|
<el-scrollbar style="height: 100%;"> |
||||
|
<el-card class="detail-container"> |
||||
|
<div slot="header" class="clearfix"> |
||||
|
<span>提交详情</span> |
||||
|
</div> |
||||
|
<div> |
||||
|
<div v-for="item in projectItemList" :key="item.id"> |
||||
|
<h4>{{ item.label }}</h4> |
||||
|
<result-item :field-item-id="item.formItemId" :project-item-data="item" |
||||
|
:result-data="activeResultRow" |
||||
|
/> |
||||
|
<el-divider /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
</el-scrollbar> |
||||
|
</el-drawer> |
||||
|
<div style="display: flex; justify-content: center; margin-top: 10px;"> |
||||
|
<el-pagination |
||||
|
v-if="total>10" |
||||
|
:current-page.sync="queryConditions.current" |
||||
|
:page-size.sync="queryConditions.size" |
||||
|
:total="total" |
||||
|
background |
||||
|
layout="total, prev, pager, next" |
||||
|
@current-change="queryProjectResult" |
||||
|
/> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="custom-col-container"> |
||||
|
<el-dialog :visible.sync="customColumnDialogVisible" center title="自定义显示列"> |
||||
|
<el-row> |
||||
|
<el-col :span="3"> |
||||
|
<span>显示列：</span> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-divider /> |
||||
|
<el-checkbox-group v-model="checkedFixedCustomColumns"> |
||||
|
<el-row> |
||||
|
<el-col v-for="(val, key) in fixedDefaultLabelFormColumn" :key="key" :span="4"> |
||||
|
<el-checkbox :label="key">{{ val }}</el-checkbox> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</el-checkbox-group> |
||||
|
<el-divider /> |
||||
|
<el-checkbox-group v-model="checkOtherCustomColumns"> |
||||
|
<el-row> |
||||
|
<el-col v-for="(val, key) in projectItemColumns" :key="key" :span="8"> |
||||
|
<el-checkbox :label="key">{{ val }}</el-checkbox> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</el-checkbox-group> |
||||
|
<span slot="footer" class="dialog-footer"> |
||||
|
<el-button @click="customColumnDialogVisible = false">取 消</el-button> |
||||
|
<el-button type="primary" @click="saveStatisticsCheckedColumns">确 定</el-button> |
||||
|
</span> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
<el-dialog :visible.sync="customFilterDialogVisible" center title="结构化筛选"> |
||||
|
<div class="flex-center"> |
||||
|
<el-transfer |
||||
|
v-model="checkedFilterColumns" |
||||
|
filterable |
||||
|
:props="{ |
||||
|
key: 'formItemId', |
||||
|
label: 'label' |
||||
|
}" |
||||
|
filter-placeholder="请输入问题名称" |
||||
|
:data="projectItemList" |
||||
|
/> |
||||
|
</div> |
||||
|
<span slot="footer" class="dialog-footer"> |
||||
|
<el-button @click="customColumnDialogVisible = false">取 消</el-button> |
||||
|
<el-button type="primary" @click="saveStatisticsCheckedColumns">确 定</el-button> |
||||
|
</span> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import _ from 'lodash' |
||||
|
import ResultItem from './item' |
||||
|
import {getCheckedColumn, saveCheckedColumn} from '@/utils/db' |
||||
|
|
||||
|
const fixedDefaultFormColumn = ['serialNumber', 'submitAddress', 'createTime'] |
||||
|
const fixedDefaultLabelFormColumn = {serialNumber: '提交序号', submitAddress: '提交地址', createTime: '提交时间'} |
||||
|
|
||||
|
export default { |
||||
|
name: 'ProjectStatisticsList', |
||||
|
components: { |
||||
|
ResultItem |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
projectKey: null, |
||||
|
customFilterDialogVisible: false, |
||||
|
customColumnDialogVisible: false, |
||||
|
checkedFilterColumns: [], |
||||
|
// 固定自定义列 如序号等 |
||||
|
fixedCustomColumns: fixedDefaultFormColumn, |
||||
|
// 选中的 |
||||
|
checkedFixedCustomColumns: fixedDefaultFormColumn, |
||||
|
fixedDefaultLabelFormColumn: fixedDefaultLabelFormColumn, |
||||
|
// 自定义表单属性 |
||||
|
checkOtherCustomColumns: [], |
||||
|
otherCustomColumns: [], |
||||
|
projectResultList: [], |
||||
|
projectItemList: [], |
||||
|
projectData: null, |
||||
|
projectItemColumns: {}, |
||||
|
total: 0, |
||||
|
detailDrawer: false, |
||||
|
activeResultRow: null, |
||||
|
// 查询条件 |
||||
|
queryConditions: { |
||||
|
current: 1, |
||||
|
size: 10, |
||||
|
projectKey: '', |
||||
|
beginDateTime: '', |
||||
|
endDateTime: '' |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.projectKey = this.$route.query.key |
||||
|
this.queryConditions.projectKey = this.projectKey |
||||
|
this.queryProjectResult() |
||||
|
this.queryProjectItems() |
||||
|
this.queryProject() |
||||
|
}, methods: { |
||||
|
renderHeader() { |
||||
|
return ( |
||||
|
<i class="el-icon-setting" style="color:currentColor" |
||||
|
onClick={() => this.customColumnDialogVisible = true}></i> |
||||
|
) |
||||
|
}, |
||||
|
|
||||
|
openDetailDrawerHandle(row) { |
||||
|
this.activeResultRow = row |
||||
|
this.detailDrawer = true |
||||
|
}, |
||||
|
queryProject() { |
||||
|
this.$api.get(`/user/project/${this.projectKey}`).then(res => { |
||||
|
this.projectData = res.data |
||||
|
}) |
||||
|
}, |
||||
|
queryProjectResult() { |
||||
|
this.$api.get('/user/project/result/page', {params: this.queryConditions}).then(res => { |
||||
|
let {records, total, size} = res.data |
||||
|
this.projectResultList = records |
||||
|
this.total = total |
||||
|
this.queryConditions.size = size |
||||
|
}) |
||||
|
}, |
||||
|
saveStatisticsCheckedColumns() { |
||||
|
this.customColumnDialogVisible = false |
||||
|
this.fixedCustomColumns = this.checkedFixedCustomColumns |
||||
|
this.otherCustomColumns = this.checkOtherCustomColumns |
||||
|
saveCheckedColumn(this.projectKey, { |
||||
|
fixedCustomColumns: this.fixedCustomColumns, |
||||
|
otherCustomColumns: this.otherCustomColumns |
||||
|
}) |
||||
|
}, |
||||
|
getDbCheckedColumns() { |
||||
|
let checkedColumn = getCheckedColumn(this.projectKey) |
||||
|
if (!checkedColumn) { |
||||
|
return |
||||
|
} |
||||
|
let {fixedCustomColumns, otherCustomColumns} = checkedColumn |
||||
|
if (fixedCustomColumns) { |
||||
|
this.fixedCustomColumns = fixedCustomColumns |
||||
|
this.checkedFixedCustomColumns = fixedCustomColumns |
||||
|
} |
||||
|
if (otherCustomColumns) { |
||||
|
this.otherCustomColumns = otherCustomColumns |
||||
|
this.checkOtherCustomColumns = otherCustomColumns |
||||
|
} |
||||
|
}, |
||||
|
downloadProjectResultFile() { |
||||
|
if (!this.total) { |
||||
|
this.$message.error('无附件，无法导出') |
||||
|
return |
||||
|
} |
||||
|
this.$api.get('/user/project/result/download/file', { |
||||
|
params: this.queryConditions |
||||
|
}).then(res => { |
||||
|
this.$process({ |
||||
|
message: '附件导出中', |
||||
|
key: res.data |
||||
|
}) |
||||
|
}) |
||||
|
}, |
||||
|
exportProjectResult() { |
||||
|
if (!this.total) { |
||||
|
this.$message.error('无表单有效反馈结果，无法导出') |
||||
|
return |
||||
|
} |
||||
|
this.$api.get('user/project/result/export', { |
||||
|
params: this.queryConditions, |
||||
|
responseType: 'blob' |
||||
|
}).then(res => { |
||||
|
let blob = res |
||||
|
let downloadElement = document.createElement('a') |
||||
|
let href = window.URL.createObjectURL(blob) // 创建下载的链接 |
||||
|
downloadElement.href = href |
||||
|
downloadElement.download = this.projectData.name + this.$dayjs().format('YYYYMMDDHHMM') + '.xls' // 下载后文件名 |
||||
|
document.body.appendChild(downloadElement) |
||||
|
downloadElement.click() // 点击下载 |
||||
|
document.body.removeChild(downloadElement) // 下载完成移除元素 |
||||
|
window.URL.revokeObjectURL(href) // 释放掉blob对象 |
||||
|
}) |
||||
|
}, |
||||
|
queryProjectItems() { |
||||
|
this.$api.get('/user/project/item/list', {params: {key: this.projectKey, displayType: false}}).then(res => { |
||||
|
if (res.data) { |
||||
|
res.data.map(item => { |
||||
|
_.set(this.projectItemColumns, `field${item.formItemId}`, item.label) |
||||
|
}) |
||||
|
} |
||||
|
this.projectItemList = res.data |
||||
|
this.getDbCheckedColumns() |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.statistics-container { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
.custom-col-container >>> .el-checkbox__label { |
||||
|
width: 200px; |
||||
|
min-height: 25px; |
||||
|
line-height: 25px; |
||||
|
vertical-align: middle; |
||||
|
overflow: hidden; |
||||
|
white-space: nowrap; |
||||
|
text-overflow: ellipsis; |
||||
|
} |
||||
|
.result-table-view { |
||||
|
width: 80%; |
||||
|
margin: 6px auto; |
||||
|
} |
||||
|
.detail-container { |
||||
|
padding: 20px; |
||||
|
height: 100% !important; |
||||
|
} |
||||
|
.filter-table-view { |
||||
|
width: 80%; |
||||
|
margin: 0 auto; |
||||
|
} |
||||
|
::v-deep .el-icon-setting { |
||||
|
font-size: 24px; |
||||
|
line-height: 25px; |
||||
|
color: white; |
||||
|
} |
||||
|
::v-deep .data-table-header .cell { |
||||
|
text-overflow: ellipsis !important; |
||||
|
white-space: nowrap !important; |
||||
|
} |
||||
|
|
||||
|
/* 1.显示滚动条：当内容超出容器的时候，可以拖动： */ |
||||
|
::v-deep .el-drawer__body { |
||||
|
overflow: auto; |
||||
|
|
||||
|
/* overflow-x: auto; */ |
||||
|
} |
||||
|
|
||||
|
/* 2.隐藏滚动条，太丑了 */ |
||||
|
::v-deep .el-drawer__container ::-webkit-scrollbar { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
</style> |
||||
Loading…
Reference in new issue