kubbo/dvcp_v2_wxcp_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

问卷表单

Browse Source
This commit is contained in:
yanran200730
2021-11-23 13:41:02 +08:00
parent d6a26e4009
commit 02db67eb00
2 changed files with 687 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

189
src/apps/AppAskForm/components/AddList.vue Normal file
View File

@@ -0,0 +1,189 @@
<template>
<div class="form">
<div class="form-list">
<div
class="form-list__item"
@click="toAdd(index)"
:style="{'background-image': `url(${$cdn}askform/${index + 1}.png)`}"
v-for="(item, index) in itemList"
:key="index">
<h2>{{ item.name }}</h2>
<div>立即创建</div>
</div>
</div>
<div class="template" v-if="list.length">
<h2>共享模板</h2>
<div class="template-list">
<div class="template-item" v-for="(item, index) in list" :key="index" hover-class="bg-hover" @click="quote(item.id)">
<image :src="`${$cdn}askform/6.png`" />
<h2>{{ item.title }}</h2>
<u-icon name="arrow-right" color="#E1E2E3" />
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'addList',
label: '新建项目',
data () {
return {
itemList: [{
name: '调查问卷'
}, {
name: '考试测评'
}, {
name: '报名登记'
}, {
name: '满意调查'
}, {
name: '投票评选'
}],
list: []
}
},
mounted () {
this.getList()
},
methods: {
toAdd (type) {
this.$emit('change', {
type: 'AddForm',
params: {
type
}
})
},
quote (id) {
this.$emit('change', {
type: 'AddForm',
params: {
id,
isQuote: 1
}
})
},
getList () {
this.$http.post(`/app/appquestionnairetemplate/list`, null, {
params: {
current: 1,
templateType: 1,
size: 10000
}
}).then(res => {
if (res.code == 0) {
this.list = res.data.records
}
})
}
}
}
</script>
<style lang="scss" scoped>
.template {
margin: 32px 32px 0;
background: #fff;
border-radius: 8px;
overflow: hidden;
& > h2 {
height: 88px;
line-height: 88px;
padding: 0 24px;
color: #333333;
font-size: 30px;
}
.template-item {
display: flex;
align-items: center;
height: 104px;
padding: 0 24px;
border-bottom: 1px solid #D8DDE6;
&:active {
background-color: #eee;
}
&:last-child {
border: none;
}
image {
width: 36px;
height: 42px;
}
i {
font-size: 30px;
color: #E1E2E3;
}
h2 {
flex: 1;
padding: 0 18px;
color: #333333;
font-size: 28px;
font-weight: normal;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
}
}
.form-list {
display: flex;
flex-wrap: wrap;
padding: 0 32px 0;
div {
box-sizing: border-box;
}
.form-list__item {
width: calc(50% - 13px);
height: 216px;
margin: 32px 24px 0 0;
padding: 40px 20px 52px;
background-color: #FFFFFF;
border-radius: 8px;
background-size: 100% 100%;
&:active {
background-color: #eee;
}
&:nth-of-type(2n) {
margin-right: 0;
}
div {
width: 148px;
height: 48px;
line-height: 48px;
text-align: center;
color: #fff;
font-size: 28px;
background: #6BA1F9;
border-radius: 24px;
}
h2 {
margin-bottom: 32px;
padding-left: 10px;
color: #333333;
font-weight: 700;
font-size: 32px;
}
}
}
</style>

498
src/apps/AppAskForm/components/List.vue Normal file
View File

@@ -0,0 +1,498 @@
<template>
<div class="form">
<ai-top-fixed>
<u-search placeholder="请输入标题" :show-action="false" search-icon-color="#ccc" v-model="search.title"
@search="isMore = false, search.current = 1, getList()"/>
</ai-top-fixed>
<div class="form-list">
<div class="form-item" v-for="(item, index) in list" :key="index"
@click="info = item, id = item.id, isShow = true">
<div class="form-item__top">
<div class="form-item__left">
<h2>{{ item.title }}</h2>
<div class="form-item__left--info">
<span>{{ item.createUserName }}</span>
<span>{{ item.createUnitName }}</span>
<span>{{ item.createTime.substr(0, item.createTime.length - 3) }}</span>
<span>{{ $dict.getLabel('questionnaireType', item.type) }}</span>
</div>
</div>
<div class="form-item__right">
<h2>{{ item.dataCount }}</h2>
<span>答卷数量</span>
</div>
</div>
<div class="form-item__bottom form-item__bottom--active">
<i :style="{background: $dict.getColor('questionnaireStatus', item.status)}"></i>
<span>{{ $dict.getLabel('questionnaireStatus', item.status) }}</span>
</div>
</div>
<ai-empty v-if="!list.length && isMore"></ai-empty>
</div>
<u-popup v-model="isShow" :closeable="false" mode="bottom">
<div class="popup">
<h2>{{ info.title }}</h2>
<div class="operate-list">
<div class="operate-item" @click="toEdit">
<div>
<image :src="`${$cdn}askform/bj.png`"/>
</div>
<h3>编辑</h3>
</div>
<div class="operate-item" @click="linkTo('/pages/askForm/askForm?preview=1&id=' + id)">
<div>
<image :src="`${$cdn}askform/yl.png`"/>
</div>
<h3>预览</h3>
</div>
<div class="operate-item" @click="publish" v-if="info.status !== '1'">
<div>
<image :src="`${$cdn}askform/fb.png`"/>
</div>
<h3>发布</h3>
</div>
<div class="operate-item" @click="toStop" v-if="info.status === '1'">
<div>
<image :src="`${$cdn}askform/stop.png`"/>
</div>
<h3>停止</h3>
</div>
<div class="operate-item" @click="showShare">
<div>
<image :src="`${$cdn}askform/fx.png`"/>
</div>
<h3>分享</h3>
</div>
<div class="operate-item" @click="share(id)">
<div>
<image :src="`${$cdn}askform/mb.png`"/>
</div>
<h3>共享为模板</h3>
</div>
<div class="operate-item" @click="remove(id)">
<div>
<image :src="`${$cdn}askform/sc.png`"/>
</div>
<h3>删除</h3>
</div>
</div>
<div class="popup-btn" @click="isShow = false">关闭</div>
</div>
</u-popup>
</div>
</template>
<script>
import {mapActions} from 'vuex'
export default {
name: 'formList',
label: '表单列表',
data() {
return {
search: {
current: 1,
templateType: 0,
title: ''
},
value: '',
id: '',
info: {},
isMore: false,
list: [],
isShow: false
}
},
mounted() {
this.injectJWeixin(['sendChatMessage', 'selectEnterpriseContact'])
this.$dict.load(['questionnaireStatus', 'questionnaireType', 'questionnaireFieldType']).then(() => {
this.getList()
})
},
methods: {
...mapActions(['injectJWeixin', 'wxInvoke']),
linkTo(url) {
this.isShow = false
uni.navigateTo({
url
})
},
toStop() {
this.$http.post(`/app/appquestionnairetemplate/stopRelease?id=${this.info.id}`).then(res => {
if (res.code === 0) {
this.$u.toast('停止成功')
this.search.current = 1
this.isShow = false
this.isMore = false
this.getList()
}
})
},
showShare() {
if (this.info.status !== '1') {
this.isShow = false
return this.$u.toast(`该表单${this.info.status === '0' ? '未发布' : '已截止'}，无法分享！`)
}
uni.showActionSheet({
itemList: ['分享', '微信分享', '获取链接'],
success: data => {
this.$http.post(`/app/appquestionnairetemplate/queryQrCode?id=${this.info.id}`).then(res => {
if (res.code == 0) {
if (data.tapIndex === 2) {
this.copy(res.data.linkUrl)
this.isShow = false
}
if (data.tapIndex === 0 || data.tapIndex === 1) {
this.injectJWeixin(['shareAppMessage', 'shareWechatMessage']).then(() => {
if (data.tapIndex === 0) {
this.wxInvoke(['shareAppMessage', {
title: this.info.title,
desc: this.info.tableExplain,
link: res.data.linkUrl,
imgUrl: this.info.headPicture
}, () => {
this.isShow = false
}])
} else {
this.wxInvoke(['shareWechatMessage', {
title: this.info.title,
desc: this.info.tableExplain,
link: res.data.linkUrl,
imgUrl: this.info.headPicture
}, () => {
this.isShow = false
}])
}
})
}
}
})
}
})
},
copy(link) {
let oInput = document.createElement('input')
oInput.value = link
document.body.appendChild(oInput)
oInput.select()
document.execCommand('Copy')
this.$u.toast('已复制')
oInput.remove()
},
publish() {
if (this.info.status === '1') {
return this.$u.toast('该表单已发布')
}
this.linkTo(`/pages/askForm/formSetting?id=${this.info.id}&type=edit`)
this.isShow = false
},
toEdit () {
if (this.info.dataCount !== 0) {
return this.$u.toast('该表单已有数据，无法编辑!')
}
this.$emit('change', {
type: 'AddForm',
params: {
id: this.id
}
})
this.isShow = false
},
share(id) {
this.$http.post(`/app/appquestionnairetemplate/share?id=${id}`).then(res => {
if (res.code === 0) {
this.$confirm('调查表单共享成功，其他成员可在新建项目时直接使用！', '', {
showCancel: false
})
this.isShow = false
}
})
},
remove(id) {
if (this.info.dataCount !== 0) {
return this.$u.toast('该表单已有数据，无法删除!')
}
this.$confirm('确定删除该数据？').then(() => {
this.$http.post(`/app/appquestionnairetemplate/delete?id=${id}`).then(res => {
if (res.code == 0) {
this.$u.toast('删除成功')
this.isShow = false
this.search.current = 1
this.isMore = false
this.getList()
}
})
}).catch(() => {
})
},
reload() {
this.isMore = false
this.search.current = 1
this.getList()
},
getList() {
if (this.isMore) return
this.$http.post(`/app/appquestionnairetemplate/list`, null, {
params: {
...this.search,
size: 10
}
}).then(res => {
if (res.code == 0) {
if (this.search.current > 1) {
this.list = [...this.list, ...res.data.records]
} else {
this.list = res.data.records
}
uni.hideLoading()
if (res.data.records.length < 10) {
this.isMore = true
return false
}
this.search.current = this.search.current + 1
} else {
uni.hideLoading()
}
}).catch(() => {
uni.hideLoading()
})
}
}
}
</script>
<style lang="scss" scoped>
.form {
::v-deep .u-search {
margin-bottom: 0 !important;
.u-search__content__input {
height: 100%;
}
}
.popup {
background: #F7F7F7;
& > h2 {
height: 72px;
line-height: 72px;
padding: 0 20px;
color: #999999;
font-size: 22px;
text-align: center;
border-bottom: 2px solid #D7D8DA;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.popup-btn {
height: 96px;
line-height: 96px;
text-align: center;
color: #333333;
font-size: 30px;
background: #fff;
&:active {
background: #eee;
}
}
.operate-list {
display: flex;
flex-wrap: wrap;
text-align: center;
padding-bottom: 26px;
.operate-item {
width: 25%;
font-size: 0;
margin-top: 28px;
&:active {
opacity: 0.7;
}
h3 {
margin-top: 20px;
color: #666666;
font-size: 26px;
font-weight: normal;
}
}
image {
width: 100px;
height: 100px;
border-radius: 16px;
background: #fff;
}
}
}
div {
box-sizing: border-box;
}
.form-item {
margin: 24px 25px 0;
padding: 32px;
background: #FFFFFF;
border-radius: 16px;
.form-item__bottom {
display: flex;
align-items: center;
margin-top: 28px;
color: #999999;
i {
width: 12px;
height: 12px;
margin-right: 6px;
border-radius: 50%;
background: #999999;
}
span {
font-size: 26px;
}
&.form-item__bottom--active i {
background: #3CB300;
}
}
.form-item__top {
display: flex;
justify-content: space-between;
align-items: center;
.form-item__right {
text-align: center;
h2 {
line-height: 40px;
margin-bottom: 16px;
font-size: 32px;
font-weight: 600;
color: #1EA0FA;
}
span {
color: #999999;
font-size: 22px;
}
}
.form-item__left {
flex: 1;
max-width: 80%;
position: relative;
&::after {
position: absolute;
right: -15px;
top: 50%;
width: 2px;
height: 96px;
background: #F5F5F5;
content: '';
transform: translateY(-50%);
}
h2 {
line-height: 44px;
margin-bottom: 16px;
color: #333;
font-size: 32px;
font-weight: 700;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.form-item__left--info {
display: flex;
align-items: center;
flex-wrap: wrap;
color: #999;
font-size: 20px;
span {
position: relative;
margin-right: 24px;
&::after {
position: absolute;
right: -12px;
top: 50%;
width: 2px;
height: 20px;
background: #D1D2D5;
content: '';
transform: translateY(-50%);
}
&:last-child {
margin-right: 0;
&::after {
display: none;
}
}
}
}
}
}
}
.type-0 {
background: #2266FF !important;
}
.type-1 {
background: rgba(34, 170, 153, 1) !important;
}
.type-2 {
background: rgba(248, 180, 37, 1) !important;
}
.type-3 {
background: rgba(102, 119, 187, 1) !important;
}
.type-4 {
background: rgba(236, 68, 97, 1) !important;
}
}
</style>