5 changed files with 147 additions and 26 deletions
@ -1,75 +1,185 @@ |
|||||
<template> |
<template> |
||||
<div class="statistics-container"> |
<div class="statistics-container"> |
||||
<template> |
<div class="filter-table-view"> |
||||
|
<el-form :inline="true" class="demo-form-inline"> |
||||
|
<el-form-item label="审批人"> |
||||
|
<el-input placeholder="审批人"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="活动区域"> |
||||
|
|
||||
|
</el-form-item> |
||||
|
<el-form-item> |
||||
|
<el-button type="primary">查询</el-button> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
<div class="result-table-view"> |
||||
<el-table |
<el-table |
||||
:data="projectResultList" |
stripe :header-cell-style="{background:'#184F7D'}" |
||||
style="width: 100%"> |
:data="projectResultList"> |
||||
<el-table-column |
<el-table-column |
||||
type="selection" |
type="selection" |
||||
width="55"> |
width="55"> |
||||
</el-table-column> |
</el-table-column> |
||||
<el-table-column |
<el-table-column v-for="col in fixedCustomColumns" :key="col" |
||||
prop="serialNumber" |
:label="fixedDefaultLabelFormColumn[col]"> |
||||
label="提交序号" |
<template slot-scope="scope"> |
||||
width="180"> |
{{ scope.row[col] }} |
||||
|
</template> |
||||
</el-table-column> |
</el-table-column> |
||||
<el-table-column |
<el-table-column v-for="col in otherCustomColumns" :key="col" |
||||
prop="submitAddress" |
:label="projectItemColumns[col]"> |
||||
label="提交地址" |
<template slot-scope="scope"> |
||||
width="180"> |
{{ scope.row['processData'][col] }} |
||||
|
</template> |
||||
</el-table-column> |
</el-table-column> |
||||
<el-table-column |
<el-table-column |
||||
prop="address" |
width="50" |
||||
label="地址"> |
fixed="right" |
||||
|
:render-header="renderHeader"> |
||||
</el-table-column> |
</el-table-column> |
||||
</el-table> |
</el-table> |
||||
</template> |
|
||||
|
|
||||
</div> |
</div> |
||||
|
<div class=""> |
||||
|
<el-dialog center title="自定义显示列" :visible.sync="customColumnDialogVisible"> |
||||
|
<el-row> |
||||
|
<el-col :span="3"> |
||||
|
<span>显示列:</span> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-divider></el-divider> |
||||
|
<el-checkbox-group v-model="checkFixedCustomColumns"> |
||||
|
<el-row> |
||||
|
<el-col :span="4" v-for="(val, key, index) in fixedDefaultLabelFormColumn"> |
||||
|
<el-checkbox :label="key">{{ val }}</el-checkbox> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</el-checkbox-group> |
||||
|
<el-divider></el-divider> |
||||
|
<el-checkbox-group v-model="checkOtherCustomColumns"> |
||||
|
<el-row> |
||||
|
<el-col :span="8" v-for="(val, key, index) in projectItemColumns"> |
||||
|
<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> |
||||
|
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
|
import _ from 'lodash' |
||||
|
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: {}, |
||||
props: { |
props: { |
||||
projectKey: '', |
projectKey: '' |
||||
projectResultList: [] |
|
||||
}, |
}, |
||||
mounted() { |
mounted() { |
||||
this.queryConditions.projectKey = this.projectKey |
this.queryConditions.projectKey = this.projectKey |
||||
this.queryProjectResult() |
this.queryProjectResult() |
||||
|
this.queryProjectItems() |
||||
|
|
||||
}, |
}, |
||||
data() { |
data() { |
||||
return { |
return { |
||||
|
customColumnDialogVisible: false, |
||||
|
//固定自定义列 如序号等 |
||||
|
fixedCustomColumns: fixedDefaultFormColumn, |
||||
|
//选中的 |
||||
|
checkFixedCustomColumns: fixedDefaultFormColumn, |
||||
|
fixedDefaultLabelFormColumn: fixedDefaultLabelFormColumn, |
||||
|
//自定义表单属性 |
||||
|
checkOtherCustomColumns: [], |
||||
|
otherCustomColumns: [], |
||||
|
projectResultList: [], |
||||
|
projectItemList: [], |
||||
|
projectItemColumns: {}, |
||||
//查询条件 |
//查询条件 |
||||
queryConditions: { |
queryConditions: { |
||||
projectKey: '' |
projectKey: '' |
||||
} |
} |
||||
} |
} |
||||
}, methods: { |
}, methods: { |
||||
|
renderHeader(h) { |
||||
|
return ( |
||||
|
<i class="el-icon-setting" onClick={() => this.customColumnDialogVisible = true}></i> |
||||
|
) |
||||
|
}, |
||||
queryProjectResult() { |
queryProjectResult() { |
||||
this.$api.post(`/user/project/result/query`, this.queryConditions).then(res => { |
this.$api.post(`/user/project/result/query`, this.queryConditions).then(res => { |
||||
this.projectResultList = res.data |
this.projectResultList = res.data |
||||
}) |
}) |
||||
|
}, |
||||
|
saveStatisticsCheckedColumns() { |
||||
|
this.customColumnDialogVisible = false |
||||
|
this.fixedCustomColumns = this.checkFixedCustomColumns |
||||
|
this.otherCustomColumns = this.checkOtherCustomColumns |
||||
|
saveCheckedColumn(this.projectKey, { |
||||
|
fixedCustomColumns: this.fixedCustomColumns, |
||||
|
otherCustomColumns: this.otherCustomColumns |
||||
|
}) |
||||
|
}, |
||||
|
getDbCheckedColumns() { |
||||
|
let {fixedCustomColumns, otherCustomColumns} = getCheckedColumn(this.projectKey) |
||||
|
if (fixedCustomColumns) { |
||||
|
this.fixedCustomColumns = fixedCustomColumns |
||||
|
this.checkFixedCustomColumns = fixedCustomColumns |
||||
|
} |
||||
|
if (otherCustomColumns) { |
||||
|
this.otherCustomColumns = otherCustomColumns |
||||
|
this.checkOtherCustomColumns = otherCustomColumns |
||||
|
} |
||||
|
}, |
||||
|
queryProjectItems() { |
||||
|
this.$api.get(`/user/project/item/query/${this.projectKey}`).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 lang="scss" scoped> |
<style scoped> |
||||
.statistics-container { |
.statistics-container { |
||||
width: 100%; |
width: 100%; |
||||
height: 100%; |
height: 100%; |
||||
padding: 0px; |
padding: 0px; |
||||
margin: 0; |
min-height: 85vh; |
||||
background-color: #F7F7F7; |
background-color: #F7F7F7; |
||||
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif; |
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif; |
||||
display: flex; |
|
||||
align-items: center; |
|
||||
justify-content: center; |
|
||||
} |
} |
||||
|
|
||||
|
.result-table-view { |
||||
|
width: 80%; |
||||
|
margin: 0px auto; |
||||
|
} |
||||
|
|
||||
|
.filter-table-view { |
||||
|
width: 80%; |
||||
|
margin: 0px auto; |
||||
|
} |
||||
|
|
||||
|
/deep/ .el-icon-setting { |
||||
|
font-size: 24px; |
||||
|
line-height: 25px; |
||||
|
color: white; |
||||
|
} |
||||
|
</style> |
||||
|
Loading…
Reference in new issue