wangqing
4 years ago
12 changed files with 321 additions and 51 deletions
@ -0,0 +1,55 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div v-if="projectItemData.type=='UPLOAD'"> |
||||
|
<div v-if="getItemValue['files']"> |
||||
|
<el-link |
||||
|
v-for="file in getItemValue['files']" |
||||
|
|
||||
|
:key="file" |
||||
|
:href="file.url" target="_blank" |
||||
|
type="primary" |
||||
|
> |
||||
|
<span> {{ file.fileName }}</span> |
||||
|
</el-link> |
||||
|
</div> |
||||
|
<span v-else>/</span> |
||||
|
</div> |
||||
|
<div v-else> |
||||
|
{{ getItemValue ? getItemValue : '/' }} |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'ResultItem', |
||||
|
props: { |
||||
|
projectItemData: { |
||||
|
type: Object, |
||||
|
default: function() { |
||||
|
return {} |
||||
|
} |
||||
|
}, |
||||
|
resultData: { |
||||
|
type: Object, |
||||
|
default: function() { |
||||
|
return {} |
||||
|
} |
||||
|
}, |
||||
|
fieldItemId: { |
||||
|
type: Number, |
||||
|
default: 0 |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
processData() { |
||||
|
return this.resultData ? this.resultData['processData'] : {} |
||||
|
}, |
||||
|
getItemValue() { |
||||
|
return this.processData[`field${this.fieldItemId}`] ? this.processData[`field${this.fieldItemId}`] : '' |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
</script> |
||||
|
|
||||
@ -0,0 +1,185 @@ |
|||||
|
<template> |
||||
|
<el-container> |
||||
|
<el-header class="el-page-header"> |
||||
|
<h5 v-if="projectData">{{ projectData.name }}</h5> |
||||
|
<el-button type="primary" @click="openFormHandle">访问表单</el-button> |
||||
|
</el-header> |
||||
|
<el-main> |
||||
|
<el-table |
||||
|
:data="projectResultList" |
||||
|
class="public-result-table" |
||||
|
> |
||||
|
<el-table-column type="expand"> |
||||
|
<template slot-scope="props"> |
||||
|
<el-form class="public-table-expand" label-position="left"> |
||||
|
<el-form-item v-for="item in projectItemList" :key="item.id" :label="item.label"> |
||||
|
<result-item :field-item-id="item.formItemId" :project-item-data="item" |
||||
|
:result-data="props.row" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
label="提交序号" |
||||
|
prop="serialNumber" |
||||
|
/> |
||||
|
<el-table-column |
||||
|
label="提交地址" |
||||
|
prop="submitAddress" |
||||
|
/> |
||||
|
<el-table-column |
||||
|
label="提交时间" |
||||
|
prop="createTime" |
||||
|
/> |
||||
|
</el-table> |
||||
|
</el-main> |
||||
|
</el-container> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import _ from 'lodash' |
||||
|
import ResultItem from './item' |
||||
|
|
||||
|
export default { |
||||
|
name: 'StatisticsPublic', |
||||
|
components: { |
||||
|
ResultItem |
||||
|
}, |
||||
|
metaInfo: { |
||||
|
title: '反馈结果', |
||||
|
meta: [ |
||||
|
{ |
||||
|
name: 'viewport', |
||||
|
content: 'width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=2,user-scalable=yes' |
||||
|
} |
||||
|
] |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
projectResultList: [], |
||||
|
projectItemList: [], |
||||
|
projectData: null, |
||||
|
projectItemColumns: {}, |
||||
|
// 查询条件 |
||||
|
queryConditions: { |
||||
|
current: 1, |
||||
|
size: 10, |
||||
|
projectKey: '', |
||||
|
beginDateTime: '', |
||||
|
endDateTime: '' |
||||
|
}, |
||||
|
projectKey: null, |
||||
|
tableData: [{ |
||||
|
id: '12987122', |
||||
|
name: '好滋好味鸡蛋仔', |
||||
|
category: '江浙小吃、小吃零食', |
||||
|
desc: '荷兰优质淡奶，奶香浓而不腻', |
||||
|
address: '上海市普陀区真北路', |
||||
|
shop: '王小虎夫妻店', |
||||
|
shopId: '10333' |
||||
|
}, { |
||||
|
id: '12987123', |
||||
|
name: '好滋好味鸡蛋仔', |
||||
|
category: '江浙小吃、小吃零食', |
||||
|
desc: '荷兰优质淡奶，奶香浓而不腻', |
||||
|
address: '上海市普陀区真北路', |
||||
|
shop: '王小虎夫妻店', |
||||
|
shopId: '10333' |
||||
|
}, { |
||||
|
id: '12987125', |
||||
|
name: '好滋好味鸡蛋仔', |
||||
|
category: '江浙小吃、小吃零食', |
||||
|
desc: '荷兰优质淡奶，奶香浓而不腻', |
||||
|
address: '上海市普陀区真北路', |
||||
|
shop: '王小虎夫妻店', |
||||
|
shopId: '10333' |
||||
|
}, { |
||||
|
id: '12987126', |
||||
|
name: '好滋好味鸡蛋仔', |
||||
|
category: '江浙小吃、小吃零食', |
||||
|
desc: '荷兰优质淡奶，奶香浓而不腻', |
||||
|
address: '上海市普陀区真北路', |
||||
|
shop: '王小虎夫妻店', |
||||
|
shopId: '10333' |
||||
|
}] |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
this.projectKey = this.$route.query.projectKey |
||||
|
this.queryConditions.projectKey = this.projectKey |
||||
|
this.queryProjectResult() |
||||
|
this.queryProjectItems() |
||||
|
this.queryProject() |
||||
|
}, |
||||
|
methods: { |
||||
|
openFormHandle() { |
||||
|
this.$router.replace({path: `/s/${this.projectKey}`}) |
||||
|
}, |
||||
|
queryProject() { |
||||
|
this.$api.get(`/user/project/${this.projectKey}`).then(res => { |
||||
|
this.projectData = res.data |
||||
|
}) |
||||
|
}, |
||||
|
queryProjectResult() { |
||||
|
this.$api.get('/user/project/result/public/page', {params: this.queryConditions}).then(res => { |
||||
|
let {records, total, size} = res.data |
||||
|
this.projectResultList = records |
||||
|
this.total = total |
||||
|
this.queryConditions.size = size |
||||
|
}) |
||||
|
}, |
||||
|
queryProjectItems() { |
||||
|
this.$api.get('/user/project/item/list', {params: {key: this.projectKey}}).then(res => { |
||||
|
if (res.data) { |
||||
|
res.data.map(item => { |
||||
|
_.set(this.projectItemColumns, `field${item.formItemId}`, item.label) |
||||
|
}) |
||||
|
} |
||||
|
this.projectItemList = res.data |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style lang="scss" scoped> |
||||
|
|
||||
|
.el-header { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: space-around; |
||||
|
align-items: center; |
||||
|
.el-button { |
||||
|
height: 50%; |
||||
|
} |
||||
|
} |
||||
|
.el-main { |
||||
|
background-color: $backgroundColor; |
||||
|
height: calc(100vh - 60px); |
||||
|
} |
||||
|
@media screen and (max-width: 750px) { |
||||
|
.public-result-table { |
||||
|
width: 100% !important; |
||||
|
} |
||||
|
.el-header { |
||||
|
justify-content: space-between !important; |
||||
|
} |
||||
|
} |
||||
|
.public-result-table { |
||||
|
width: 60%; |
||||
|
margin: 0 auto; |
||||
|
} |
||||
|
.public-table-expand { |
||||
|
font-size: 0; |
||||
|
label { |
||||
|
width: 90px; |
||||
|
color: #99a9bf; |
||||
|
} |
||||
|
.el-form-item { |
||||
|
margin-right: 0; |
||||
|
margin-bottom: 0; |
||||
|
width: 50%; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
</style> |
||||
Loading…
Reference in new issue