Merge branch 'dev' of http://git.sinoecare.com/sinoecare/digital_village_v2/dvcp_v2_wxcp_app into dev
This commit is contained in:
yanran200730
741
src/project/saas/AppAskForm/AddForm.vue
Normal file
741
src/project/saas/AppAskForm/AddForm.vue
Normal file
@@ -0,0 +1,741 @@
|
||||
<template>
|
||||
<div class="add-form" v-if="pageShow">
|
||||
<div class="header-pic">
|
||||
<image v-if="form.headPicture" :src="form.headPicture"/>
|
||||
<span @click="upload">更换图片</span>
|
||||
</div>
|
||||
<div class="form-info">
|
||||
<h2>文本选项</h2>
|
||||
<div class="form-info__wrapper">
|
||||
<textarea
|
||||
class="title"
|
||||
placeholder="请输入标题 (必填）"
|
||||
:maxlength="30"
|
||||
:auto-height="true"
|
||||
v-model="form.title">
|
||||
</textarea>
|
||||
<textarea
|
||||
class="content"
|
||||
border="none"
|
||||
:clearable="false"
|
||||
type="textarea"
|
||||
v-model="form.tableExplain"
|
||||
placeholder="请输入表单描述 (选填）"
|
||||
:maxlength="255">
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
<draggable
|
||||
class="components-list"
|
||||
v-model="targetList"
|
||||
:animation="340"
|
||||
scroll
|
||||
element="div"
|
||||
:options="{
|
||||
animation: 340,
|
||||
handle: '.components-item__title'
|
||||
}"
|
||||
draggable=".components-item"
|
||||
:sort="true">
|
||||
<div class="components-item" v-for="(item, index) in targetList" :key="index" @click="toFiledSetting(item, index)">
|
||||
<div class="components-item__title">
|
||||
<div class="components-item__title--left">
|
||||
<em :style="{opacity: item.required ? 1 : 0}">*</em>
|
||||
<i>{{ index + 1 }}.</i>
|
||||
<h2>{{ item.label }}</h2>
|
||||
</div>
|
||||
<image :src="`${$cdn}askform/sc1.png`" @touchstart.stop="removeComponent(index)"/>
|
||||
</div>
|
||||
<div class="components-item__filed">
|
||||
<template v-if="(item.type === 'radio')">
|
||||
<u-radio-group v-model="item.value" wrap>
|
||||
<u-radio class="u-radio" disabled style="display: block;" v-for="(field, i) in item.options" :key="i">
|
||||
<image :src="field.img[0].url" v-if="field.img.length"/>
|
||||
<span>{{ field.label }}</span>
|
||||
</u-radio>
|
||||
</u-radio-group>
|
||||
</template>
|
||||
<template v-if="(item.type === 'checkbox')">
|
||||
<u-checkbox-group v-model="item.value" wrap>
|
||||
<u-checkbox class="u-checkbox" disabled :name="field.label" v-for="(field, i) in item.options" :key="i">
|
||||
<image :src="field.img[0].url" v-if="field.img.length"/>
|
||||
<span>{{ field.label }}</span>
|
||||
</u-checkbox>
|
||||
</u-checkbox-group>
|
||||
</template>
|
||||
<template v-if="(item.type === 'select')">
|
||||
<div class="components-item__select">
|
||||
<span>{{ item.placeholder }}</span>
|
||||
<u-icon name="arrow-down" color="#DEDFDF"/>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="(item.type === 'upload')">
|
||||
<div class="components-item__select components-item__textarea components-item__upload">
|
||||
<image :src="`${$cdn}askform/upload.png`"/>
|
||||
<span>选择图片（10M以内）</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="(item.type === 'input')">
|
||||
<div class="components-item__select">
|
||||
<span>{{ item.placeholder }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="(item.type === 'textarea')">
|
||||
<div class="components-item__select components-item__textarea">
|
||||
<span>{{ item.placeholder }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</draggable>
|
||||
<div class="add-form__btn" @click="isShow = true">
|
||||
<image :src="`${$cdn}askform/add.png`"/>
|
||||
<span>添加问题</span>
|
||||
</div>
|
||||
<div class="add-form__footer">
|
||||
<div class="add-form__footer--item-wrapper">
|
||||
<div class="add-form__footer--item" @click="toPreview" hover-class="text-hover">
|
||||
<image :src="`${$cdn}sass/preview.png`"/>
|
||||
<span>预览</span>
|
||||
</div>
|
||||
<div class="add-form__footer--item" @click="toSetting" hover-class="text-hover">
|
||||
<image :src="`${$cdn}sass/setting.png`"/>
|
||||
<span>设置</span>
|
||||
</div>
|
||||
</div>
|
||||
<div @click="onConfirm">立即发布</div>
|
||||
</div>
|
||||
<u-popup v-model="isShow" :closeable="false" mode="bottom" @close="isShow = false">
|
||||
<div class="add-popup">
|
||||
<div class="add-popup__title">
|
||||
<h2>添加问题</h2>
|
||||
<image :src="`${$cdn}askform/zk.png`" mode="aspectFit" @click="isShow = false"/>
|
||||
</div>
|
||||
<div class="add-popup__list">
|
||||
<span @click="toFiledSetting('radio')">单选题</span>
|
||||
<span @click="toFiledSetting('checkbox')">多选题</span>
|
||||
<span @click="toFiledSetting('select')">单下拉框</span>
|
||||
<span @click="toFiledSetting('input')">单行填空</span>
|
||||
<span @click="toFiledSetting('textarea')">多行填空</span>
|
||||
<span @click="toFiledSetting('upload')">上传图片</span>
|
||||
</div>
|
||||
</div>
|
||||
</u-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import draggable from 'vuedraggable'
|
||||
import qs from "query-string"
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
pageShow: false,
|
||||
form: {
|
||||
tableExplain: '详细描述',
|
||||
title: '问卷调查',
|
||||
isShowheadPicture: true,
|
||||
isShowTableExplain: true,
|
||||
isShowBtn: true,
|
||||
headPicture: '',
|
||||
commitType: '1',
|
||||
periodValidityType: '0',
|
||||
actionNotice: '1',
|
||||
dynamicNotice: '1',
|
||||
periodValidityEndTime: '',
|
||||
shareStatus: '0',
|
||||
count: 0,
|
||||
wechatId: '0',
|
||||
type: 0,
|
||||
buttonExplain: '提交',
|
||||
tips: true
|
||||
},
|
||||
templateType: 0,
|
||||
targetList: [],
|
||||
isShow: false,
|
||||
type: 0,
|
||||
id: '',
|
||||
filedType: '',
|
||||
filed: {},
|
||||
filedIndex: '',
|
||||
isQuote: false,
|
||||
touchStart: 0,
|
||||
formConfig: {}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
draggable,
|
||||
},
|
||||
created() {
|
||||
let {type, isQuote, id} = this.$route.query
|
||||
this.type = type
|
||||
this.isQuote = !!isQuote
|
||||
if (id) {
|
||||
this.id = id
|
||||
this.getInfo(id)
|
||||
} else {
|
||||
this.pageShow = true
|
||||
}
|
||||
document.title = !id ? '新建表单' : '编辑表单'
|
||||
this.init()
|
||||
uni.$on('setting', res => {
|
||||
this.form = {
|
||||
...this.form,
|
||||
...res
|
||||
}
|
||||
this.formConfig = res
|
||||
})
|
||||
|
||||
uni.$on('filedConfig', res => {
|
||||
console.log(res)
|
||||
if (res.index < 0) {
|
||||
this.targetList.push(res.config)
|
||||
} else {
|
||||
this.targetList.splice(res.index, 1, res.config)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
onShow() {
|
||||
document.title = !this.id ? '新建表单' : '编辑表单'
|
||||
},
|
||||
methods: {
|
||||
toSetting() {
|
||||
let {formConfig} = this
|
||||
localStorage.setItem("toFormSetting", JSON.stringify(formConfig))
|
||||
uni.navigateTo({url: `./FormSetting`})
|
||||
},
|
||||
back() {
|
||||
uni.navigateBack({})
|
||||
},
|
||||
onChange(e) {
|
||||
},
|
||||
|
||||
removeComponent(index) {
|
||||
this.$confirm('确定删除该题', '').then(() => {
|
||||
this.targetList.splice(index, 1)
|
||||
}).catch(() => {})
|
||||
},
|
||||
|
||||
toPreview() {
|
||||
let {form, targetList} = this
|
||||
localStorage.setItem("toPreviewForm", JSON.stringify({form, targetList}))
|
||||
uni.navigateTo({url: `./PreviewForm`})
|
||||
},
|
||||
|
||||
upload() {
|
||||
let params = {
|
||||
count: 1,
|
||||
sizeType: ['compressed'],
|
||||
sourceType: ['album', 'camera'],
|
||||
success: (res) => {
|
||||
let count = this.fileList?.length + (res.tempFiles?.length || res.tempFile ? 1 : 0)
|
||||
if (count > 1) {
|
||||
return this.$u.toast(`不能超过1个`)
|
||||
}
|
||||
if (res.tempFiles) {
|
||||
res.tempFiles.map((item) => {
|
||||
this.uploadFile(item)
|
||||
})
|
||||
} else if (res?.tempFile) {
|
||||
this.uploadFile(res.tempFile)
|
||||
}
|
||||
}
|
||||
}
|
||||
uni.chooseImage(params)
|
||||
},
|
||||
|
||||
uploadFile(img) {
|
||||
uni.showLoading({title: '上传中'})
|
||||
let formData = new FormData()
|
||||
formData.append('file', img)
|
||||
this.$http.post('/admin/file/add2', formData).then((res) => {
|
||||
uni.hideLoading()
|
||||
if (res?.data) {
|
||||
this.$u.toast('上传成功!')
|
||||
this.form.headPicture = res.data.url
|
||||
}
|
||||
}).catch(res => {
|
||||
this.$u.toast(res)
|
||||
uni.hideLoading()
|
||||
})
|
||||
},
|
||||
|
||||
onConfirm() {
|
||||
for (let item of this.targetList) {
|
||||
if (item.isShowPoints) {
|
||||
if (item.pointType === '0') {
|
||||
if (!item.answer || JSON.stringify(item.answer) === '[]') {
|
||||
return this.$u.toast(`请输入${item.label}正确答案`)
|
||||
}
|
||||
|
||||
if (!item.points) {
|
||||
return this.$u.toast(`请输入${item.label}的分值`)
|
||||
}
|
||||
}
|
||||
|
||||
if (item.pointType === '1') {
|
||||
for (let option of item.options) {
|
||||
if (!option.point) {
|
||||
return this.$u.toast(`请输入${item.label}${option.label}的分值`)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (item.pointType === '2') {
|
||||
for (let option of item.options) {
|
||||
if (!option.point) {
|
||||
return this.$u.toast(`请输入${item.label}${option.label}的分值`)
|
||||
}
|
||||
}
|
||||
|
||||
if (!item.points) {
|
||||
return this.$u.toast(`请输入${item.label}全部答对分值`)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const fields = this.targetList.map(item => {
|
||||
return {
|
||||
fieldType: item.type,
|
||||
fieldName: item.label,
|
||||
fieldInfo: JSON.stringify(item)
|
||||
}
|
||||
})
|
||||
|
||||
this.$http.post(`/app/appquestionnairetemplate/addOrUpdate`, {
|
||||
...this.form,
|
||||
fields,
|
||||
status: 1,
|
||||
id: this.isQuote ? '' : this.id,
|
||||
headPicture: this.form.headPicture,
|
||||
type: this.type,
|
||||
templateType: 0
|
||||
}).then(res => {
|
||||
if (res?.code == 0) {
|
||||
uni.navigateTo({
|
||||
url: `./Result?${qs.stringify({
|
||||
linkUrl: res.data.linkUrl,
|
||||
title: this.form.title,
|
||||
tableExplain: this.form.tableExplain,
|
||||
headPicture: this.form.headPicture
|
||||
})}`
|
||||
})
|
||||
}
|
||||
}).catch(e => {
|
||||
this.$u.toast(e)
|
||||
})
|
||||
},
|
||||
|
||||
getInfo(id) {
|
||||
uni.showLoading()
|
||||
this.$http.post(`/app/appquestionnairetemplate/queryDetailById?id=${id}`).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.form = {
|
||||
...res.data,
|
||||
headPicture: res.data.headPicture
|
||||
}
|
||||
|
||||
this.type = res.data.type
|
||||
|
||||
this.targetList = res.data.fields.map(item => {
|
||||
return JSON.parse(item.fieldInfo)
|
||||
})
|
||||
|
||||
this.pageShow = true
|
||||
} else {
|
||||
this.$u.toast(res.msg)
|
||||
}
|
||||
uni.hideLoading()
|
||||
}).catch(() => {
|
||||
uni.hideLoading()
|
||||
})
|
||||
},
|
||||
|
||||
toFiledSetting(type, index) {
|
||||
this.isShow = false
|
||||
if (index > -1) {
|
||||
this.filed = type
|
||||
this.filedIndex = index
|
||||
localStorage.setItem("toFiledConfig", JSON.stringify({index, filed: type, filedType: type.type}))
|
||||
} else {
|
||||
this.filedIndex = ''
|
||||
localStorage.setItem("toFiledConfig", JSON.stringify({filed: '', filedType: type, index: -1}))
|
||||
}
|
||||
uni.navigateTo({url: `./FiledConfig`})
|
||||
},
|
||||
|
||||
init() {
|
||||
if (this.type == 0) {
|
||||
this.form.headPicture = 'https://cdn.cunwuyun.cn/dvcp/h5/form/interview.png'
|
||||
}
|
||||
if (this.type == 1) {
|
||||
this.form.title = '考试测评'
|
||||
this.form.headPicture = 'https://cdn.cunwuyun.cn/dvcp/h5/form/exam.png'
|
||||
}
|
||||
if (this.type == 2) {
|
||||
this.form.title = '报名登记'
|
||||
this.form.headPicture = 'https://cdn.cunwuyun.cn/dvcp/h5/form/apply.png'
|
||||
}
|
||||
if (this.type == 3) {
|
||||
this.form.title = '满意调查'
|
||||
this.form.headPicture = 'https://cdn.cunwuyun.cn/dvcp/h5/form/satisfaction.png'
|
||||
}
|
||||
if (this.type == 4) {
|
||||
this.form.title = '投票评选'
|
||||
this.form.headPicture = 'https://cdn.cunwuyun.cn/dvcp/h5/form/vote.png'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.add-form {
|
||||
min-height: 100vh;
|
||||
padding-bottom: 140px;
|
||||
box-sizing: border-box;
|
||||
background: #F3F6F9;
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.components-list {
|
||||
padding: 0 20px;
|
||||
|
||||
.components-item {
|
||||
margin-top: 24px;
|
||||
padding: 32px;
|
||||
box-shadow: 0 4px 8px 4px rgba(233, 233, 233, 0.39);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #EEEFF0;
|
||||
background: #fff;
|
||||
|
||||
.u-checkbox, .u-radio {
|
||||
display: block;
|
||||
|
||||
image {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .u-radio, ::v-deep .u-checkbox {
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.u-checkbox__icon-wrap, .u-radio__icon-wrap {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
}
|
||||
|
||||
.u-radio__label, .u-checkbox__label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 0;
|
||||
margin-left: 40px;
|
||||
text-align: justify;
|
||||
|
||||
span {
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
flex: 1;
|
||||
color: #666;
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
.components-item__select {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
margin-bottom: 8px;
|
||||
padding: 0 26px;
|
||||
border: 1px solid #DEDFDF;
|
||||
|
||||
&.components-item__textarea {
|
||||
align-items: flex-start;
|
||||
height: 160px;
|
||||
padding-top: 20px;
|
||||
|
||||
image {
|
||||
width: 46px;
|
||||
height: 34px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #666;
|
||||
font-size: 26px;
|
||||
}
|
||||
}
|
||||
|
||||
&.components-item__upload {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.components-item__title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 32px;
|
||||
|
||||
em {
|
||||
margin-right: 4px;
|
||||
font-style: normal;
|
||||
color: rgb(226, 33, 32);;
|
||||
}
|
||||
|
||||
image {
|
||||
position: relative;
|
||||
flex-shrink: 1;
|
||||
right: -20px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
box-sizing: content-box;
|
||||
padding: 30px 20px 30px 20px;
|
||||
}
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
max-width: 550px;
|
||||
color: #333333;
|
||||
font-size: 32px;
|
||||
|
||||
i {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-weight: 600;
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.add-popup {
|
||||
height: 440px;
|
||||
border-radius: 20px 20px 0 0;
|
||||
background: #fff;
|
||||
|
||||
.add-popup__title {
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 96px;
|
||||
border-bottom: 1px solid #E4E5E6;
|
||||
|
||||
h2 {
|
||||
color: #333333;
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
image {
|
||||
position: absolute;
|
||||
right: 32px;
|
||||
top: 50%;
|
||||
width: 30px;
|
||||
height: 20px;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.add-popup__list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 0 34px;
|
||||
|
||||
span {
|
||||
width: calc((100% - 64px) / 3);
|
||||
height: 78px;
|
||||
line-height: 78px;
|
||||
margin-top: 32px;
|
||||
margin-right: 32px;
|
||||
text-align: center;
|
||||
color: #333333;
|
||||
font-size: 28px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #E4E5E6;
|
||||
|
||||
&:nth-of-type(3n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.add-form__footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 112px;
|
||||
text-align: center;
|
||||
|
||||
& > div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
background: #fff;
|
||||
|
||||
&:last-child {
|
||||
color: #fff;
|
||||
font-size: 36px;
|
||||
background: #3192F4;
|
||||
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.add-form__footer--item-wrapper {
|
||||
.add-form__footer--item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
|
||||
image {
|
||||
display: block;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
text-align: center;
|
||||
color: #999;
|
||||
font-size: 28px;
|
||||
|
||||
&:active {
|
||||
background: #eee;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.add-form__btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 214px;
|
||||
height: 66px;
|
||||
line-height: 66px;
|
||||
margin: 64px auto 0;
|
||||
background: #FFFFFF;
|
||||
border-radius: 34px;
|
||||
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
span {
|
||||
margin-left: 16px;
|
||||
color: #4392E6;
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.form-info {
|
||||
padding: 0 20px;
|
||||
|
||||
& > h2 {
|
||||
height: 76px;
|
||||
line-height: 76px;
|
||||
color: #999999;
|
||||
font-weight: normal;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.form-info__wrapper {
|
||||
padding: 0 18px;
|
||||
background: #fff;
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
padding: 22px 0;
|
||||
font-size: 36px;
|
||||
border-bottom: 1px solid #F1F2F3;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
padding: 30px 0 !important;
|
||||
color: #333;
|
||||
font-size: 28px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-pic {
|
||||
position: relative;
|
||||
font-size: 0;
|
||||
|
||||
span {
|
||||
position: absolute;
|
||||
bottom: 16px;
|
||||
right: 16px;
|
||||
z-index: 1;
|
||||
width: 148px;
|
||||
height: 56px;
|
||||
line-height: 56px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 26px;
|
||||
background: rgba(0, 0, 0, 0.16);
|
||||
border-radius: 28px;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 320px;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .u-radio, ::v-deep .u-checkbox {
|
||||
align-items: baseline;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
50
src/project/saas/AppAskForm/AppAskForm.vue
Normal file
50
src/project/saas/AppAskForm/AppAskForm.vue
Normal file
@@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<div class="form">
|
||||
<component ref="TabPage" :is="component" @change="onChange" :params="params"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Tabbar from './components/Tabbar.vue'
|
||||
import AddForm from './AddForm.vue'
|
||||
import Result from './Result.vue'
|
||||
import {mapActions} from "vuex";
|
||||
|
||||
export default {
|
||||
name: 'AppAskForm',
|
||||
appName: '问卷表单',
|
||||
|
||||
data() {
|
||||
return {
|
||||
component: 'Tabbar',
|
||||
params: {},
|
||||
refresh: true
|
||||
}
|
||||
},
|
||||
|
||||
components: {
|
||||
Tabbar,
|
||||
Result,
|
||||
AddForm
|
||||
},
|
||||
|
||||
methods: {
|
||||
...mapActions(['injectJWeixin']),
|
||||
onChange(e) {
|
||||
this.params = e.params
|
||||
this.component = e.type
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
this.$refs?.TabPage?.show()
|
||||
this.$nextTick(() => {
|
||||
this.injectJWeixin(['sendChatMessage', 'shareAppMessage', 'shareWechatMessage']).then(() => {
|
||||
this.$dict.load(['questionnaireStatus', 'questionnaireType', 'questionnaireFieldType'])
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
84
src/project/saas/AppAskForm/AppForm.vue
Normal file
84
src/project/saas/AppAskForm/AppForm.vue
Normal file
@@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<section class="AppForm">
|
||||
<template v-if="showDetail">
|
||||
<form-detail/>
|
||||
</template>
|
||||
<AiResult v-else :tips="errMsg" :status="errStatus"/>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapActions, mapState} from "vuex";
|
||||
import FormDetail from "./components/formDetail";
|
||||
|
||||
export default {
|
||||
name: "AppForm",
|
||||
appName: "问卷表单",
|
||||
inject: {root: {}},
|
||||
components: {FormDetail},
|
||||
data() {
|
||||
return {
|
||||
access: false,
|
||||
err: ""
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['user', 'token']),
|
||||
showDetail() {
|
||||
return !!this.$route.query?.id && this.access
|
||||
},
|
||||
errMsg() {
|
||||
this.access && (this.err = "表单不存在")
|
||||
return this.err || "数据读取中..."
|
||||
},
|
||||
errStatus() {
|
||||
return !!this.err ? "error" : "loading"
|
||||
},
|
||||
isPreview() {
|
||||
return !!this.$route.query?.preview
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['getCode', 'getToken']),
|
||||
checkAccess() {
|
||||
let {corpId, code, suiteId, id} = this.$route.query
|
||||
if (this.isPreview) {
|
||||
this.access = true
|
||||
} else if (this.access) {
|
||||
} else if (!!this.token) {
|
||||
this.$http.post("/app/appquestionnairetemplate/commitCheck", null, {
|
||||
params: {id}
|
||||
}).then(res => {
|
||||
if (res?.code == 0) {
|
||||
this.access = true
|
||||
} else {
|
||||
this.err = "无法获取表单"
|
||||
}
|
||||
}).catch(err => {
|
||||
this.err = err
|
||||
})
|
||||
} else if (code) {
|
||||
this.getToken({code, corpId, suiteId, isAppForm: true}).then(() => {
|
||||
let {query, path, hash} = this.$route
|
||||
delete query.code
|
||||
this.root.goto({query, path, hash})
|
||||
})
|
||||
} else this.getCode()
|
||||
},
|
||||
},
|
||||
onShow() {
|
||||
document.title = '问卷调查'
|
||||
wx.hideOptionMenu()
|
||||
this.checkAccess()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.AppForm {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
}
|
||||
</style>
|
||||
537
src/project/saas/AppAskForm/FiledConfig.vue
Normal file
537
src/project/saas/AppAskForm/FiledConfig.vue
Normal file
@@ -0,0 +1,537 @@
|
||||
<template>
|
||||
<div class="form-config">
|
||||
<div class="config-group">
|
||||
<div class="config-item">
|
||||
<u-input class="form-maintitle" :maxlength="200" v-model="config.label"
|
||||
:placeholder="`请输入${config.fixedLabel||''}标题 ${config.required ? '(必填）' : ''}`"
|
||||
placeholder-style="color: #999999; font-weight: 600"/>
|
||||
</div>
|
||||
<div class="config-item__select--wrapper" v-if="['radio', 'select', 'checkbox'].includes(config.type)">
|
||||
<div class="config-item__select" v-for="(item, index) in config.options" :key="index">
|
||||
<image class="config-icon" :src="`${$cdn}askform/del.png`" @click="removeOptions(index)"/>
|
||||
<div class="config-item__upload" v-if="config.type !== 'select'" @click="upload(index)">
|
||||
<u-icon color="#8c9dc3" name="plus" v-if="!item.img.length"></u-icon>
|
||||
<image v-else :src="item.img[0].url"/>
|
||||
</div>
|
||||
<div class="textarea">
|
||||
<textarea type="textarea" placeholder-style="color: #CDCDCF" :auto-height="true" v-model="item.label"
|
||||
:maxlength="100" placeholder="请输入选项"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="config-item__select config-item__select--add" @click="addOptions">
|
||||
<image class="config-icon" :src="`${$cdn}askform/zj.png`"/>
|
||||
<span>添加选项</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="config-group">
|
||||
<div class="config-item" v-if="!['radio', 'upload', 'checkbox', 'select'].includes(config.type)">
|
||||
<div class="config-item__left">
|
||||
<span>说明文字</span>
|
||||
</div>
|
||||
<div class="config-item__right">
|
||||
<u-input v-model="config.placeholder" placeholder="请输入说明文字" input-align="right"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="config-item">
|
||||
<div class="config-item__left">
|
||||
<span>是否必填</span>
|
||||
</div>
|
||||
<div class="config-item__right">
|
||||
<u-switch v-model="config.required" active-value="1" inactive-value="0" :size="40"
|
||||
active-color="#1088F9"></u-switch>
|
||||
</div>
|
||||
</div>
|
||||
<div class="config-item" v-if="!['upload'].includes(config.type)">
|
||||
<div class="config-item__left">
|
||||
<span>答案与分值</span>
|
||||
</div>
|
||||
<div class="config-item__right">
|
||||
<u-switch v-model="config.isShowPoints" :size="40" active-color="#1088F9"></u-switch>
|
||||
</div>
|
||||
</div>
|
||||
<div class="config-item" v-if="['input', 'textarea'].includes(config.type) && config.isShowPoints">
|
||||
<div class="config-item__left">
|
||||
<span>正确答案</span>
|
||||
</div>
|
||||
<div class="config-item__right">
|
||||
<u-input v-model="config.answer" placeholder="请输入正确答案" input-align="right"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="config-item"
|
||||
v-if="['radio', 'select'].includes(config.type) && config.isShowPoints && config.pointType === '0'">
|
||||
<div class="config-item__left">
|
||||
<span>正确答案</span>
|
||||
</div>
|
||||
<div class="config-item__right config-item__text" @click="isShowAnswer = true">
|
||||
<span>{{ config.answer ? config.answer : '请选择正确答案' }}</span>
|
||||
<u-icon name="arrow-down-fill" color="#c0c4cc" size="24"></u-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="config-item config-item__checkbox"
|
||||
v-if="config.isShowPoints && ['radio', 'select', 'checkbox'].includes(config.type)">
|
||||
<div class="config-item__left">
|
||||
<span>计分方式</span>
|
||||
</div>
|
||||
<div class="config-item__right" @click="isShowType = true">
|
||||
<span>{{ pointTypeName ? pointTypeName : '请选择' }}</span>
|
||||
<u-icon name="arrow-right" color="#E1E2E3"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="config-item config-item__answer config-item__checkbox"
|
||||
v-if="['checkbox'].includes(config.type) && config.isShowPoints && config.pointType === '0'">
|
||||
<div class="config-item__left">
|
||||
<span>正确答案</span>
|
||||
</div>
|
||||
<div class="config-item__right">
|
||||
<u-checkbox-group wrap @change="onCheckboxChange">
|
||||
<u-checkbox v-model="field.checked" :name="field.label" v-if="field.label"
|
||||
v-for="(field, i) in config.options" :key="i">
|
||||
<span>{{ field.label }}</span>
|
||||
</u-checkbox>
|
||||
</u-checkbox-group>
|
||||
</div>
|
||||
</div>
|
||||
<div class="config-item" v-if="config.isShowPoints && config.pointType === '0'">
|
||||
<div class="config-item__left">
|
||||
<span>本题分值</span>
|
||||
</div>
|
||||
<div class="config-item__right">
|
||||
<u-input v-model="config.points" type="number" placeholder="请输入本题分值" input-align="right"/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="config.isShowPoints && config.pointType === '1'">
|
||||
<div class="config-item" v-for="(item, index) in config.options" :key="index">
|
||||
<div class="config-item__left">
|
||||
<span>{{ item.label }}</span>
|
||||
</div>
|
||||
<div class="config-item__right">
|
||||
<u-input v-model="item.point" placeholder="请输入分值" input-align="right"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="config-item config-item__point" v-if="config.isShowPoints && config.pointType === '2'">
|
||||
<u-checkbox-group wrap @change="onCheckboxChange">
|
||||
<u-checkbox v-model="field.checked" :name="field.label" v-if="field.label"
|
||||
v-for="(field, i) in config.options" :key="i">
|
||||
<span>{{ field.label }}</span>
|
||||
<u-input v-model="field.point" type="number" placeholder="请输入分值" input-align="right"/>
|
||||
</u-checkbox>
|
||||
</u-checkbox-group>
|
||||
</div>
|
||||
<div class="config-item" v-if="config.isShowPoints && config.pointType === '2'">
|
||||
<div class="config-item__left" style="padding-left: 20px">
|
||||
<span>全部答对</span>
|
||||
</div>
|
||||
<div class="config-item__right">
|
||||
<u-input v-model="config.points" type="number" placeholder="请输入全部答对分值" input-align="right"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<u-select :list="config.options" :default-value="defaultAnswer" value-name="value" label-name="label"
|
||||
v-model="isShowAnswer" @confirm="answerChange"></u-select>
|
||||
<u-select :list="config.pointDict" :default-value="defaultType" value-name="dictValue" label-name="dictName"
|
||||
v-model="isShowType" @confirm="pointTypeChange"></u-select>
|
||||
<div class="add-form__footer">
|
||||
<div @click="back">
|
||||
<span>取消</span>
|
||||
</div>
|
||||
<div @click="confirm">确定</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {components} from './components/config'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
let params = localStorage.getItem("toFiledConfig") || {}
|
||||
if (params) {
|
||||
params = JSON.parse(params)
|
||||
params.config = params.index > -1 ? params.filed : JSON.parse(JSON.stringify(components.filter(v => v.type === params.filedType)[0]))
|
||||
localStorage.removeItem("toFiledConfig")
|
||||
}
|
||||
return {
|
||||
...params,
|
||||
isShowType: false,
|
||||
isShowAnswer: false
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
document.title = '表单项配置'
|
||||
},
|
||||
computed: {
|
||||
pointTypeName() {
|
||||
if (!this.config.pointDict) return ''
|
||||
|
||||
return this.config.pointDict.filter(v => v.dictValue === this.config.pointType)[0].dictName
|
||||
},
|
||||
defaultType() {
|
||||
if (!this.config.pointType) return [0]
|
||||
|
||||
return [Number(this.config.pointType)]
|
||||
},
|
||||
defaultAnswer() {
|
||||
if (!this.config.answer) return [0]
|
||||
let index = 0
|
||||
if (this.config.answer) {
|
||||
this.config.options?.forEach((v, i) => {
|
||||
if (v.label === this.config.answer) {
|
||||
index = i
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return [index]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
answerChange(e) {
|
||||
this.config.answer = e[0].label
|
||||
},
|
||||
|
||||
pointTypeChange(e) {
|
||||
this.config.pointType = e[0].value
|
||||
},
|
||||
|
||||
onCheckboxChange(e) {
|
||||
this.config.answer = e
|
||||
},
|
||||
|
||||
upload(index) {
|
||||
let params = {
|
||||
count: 1,
|
||||
sizeType: ['compressed'],
|
||||
sourceType: ['album', 'camera'],
|
||||
success: (res) => {
|
||||
let count = this.fileList?.length + (res.tempFiles?.length || res.tempFile ? 1 : 0)
|
||||
if (count > 1) {
|
||||
return this.$u.toast(`不能超过1个`)
|
||||
}
|
||||
if (res.tempFiles) {
|
||||
res.tempFiles.map((item) => {
|
||||
this.uploadFile(item, index)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
uni.chooseImage(params)
|
||||
},
|
||||
|
||||
uploadFile(img, index) {
|
||||
uni.showLoading({title: '上传中'})
|
||||
let formData = new FormData()
|
||||
formData.append('file', img)
|
||||
this.$http.post('/admin/file/add2', formData).then((res) => {
|
||||
uni.hideLoading()
|
||||
if (res?.data) {
|
||||
this.$u.toast('上传成功!')
|
||||
this.$set(this.config.options[index], 'img', [res.data])
|
||||
}
|
||||
}).catch(res => {
|
||||
this.$u.toast(res)
|
||||
uni.hideLoading()
|
||||
})
|
||||
},
|
||||
|
||||
removeOptions(index) {
|
||||
const len = this.config.options.length
|
||||
const label = this.config.options[index].label
|
||||
if (len === 2) {
|
||||
return this.$u.toast('选项不能少于2个')
|
||||
}
|
||||
|
||||
if (this.config.type === 'checkbox') {
|
||||
const answerIndex = this.config.answer.indexOf(label)
|
||||
if (answerIndex > -1) {
|
||||
this.config.answer.splice(answerIndex, 1)
|
||||
}
|
||||
} else {
|
||||
if (label === this.config.answer) {
|
||||
this.config.answer = ''
|
||||
}
|
||||
}
|
||||
|
||||
this.config.options.splice(index, 1)
|
||||
},
|
||||
|
||||
back() {
|
||||
uni.navigateBack({})
|
||||
},
|
||||
|
||||
confirm() {
|
||||
uni.$emit('filedConfig', {
|
||||
config: this.config,
|
||||
index: this.index === '' ? '-1' : this.index
|
||||
})
|
||||
this.back()
|
||||
},
|
||||
|
||||
addOptions() {
|
||||
const len = this.config.options.length
|
||||
let label = `选项${len + 1}`
|
||||
|
||||
const index = this.config.options.findIndex(v => label === v.label)
|
||||
if (index > -1) {
|
||||
label = `新选项${len + 1}`
|
||||
}
|
||||
|
||||
this.config.options.push({
|
||||
label: label,
|
||||
value: '',
|
||||
point: '',
|
||||
img: '',
|
||||
checked: false
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.form-config {
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 130px;
|
||||
|
||||
.form-maintitle {
|
||||
::v-deep .uni-input-input {
|
||||
font-size: 36px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.config-item__select--wrapper {
|
||||
.config-item__select {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
::v-deep .u-input__input {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.textarea {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 104px;
|
||||
padding: 16px 0;
|
||||
font-size: 28px;
|
||||
border-bottom: 1px solid #dfe8f8;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.config-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.config-item__select--add {
|
||||
height: 120px;
|
||||
|
||||
.config-icon {
|
||||
margin-right: 18px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #1D74F4;
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.config-group {
|
||||
margin-bottom: 32px;
|
||||
padding: 0 32px;
|
||||
background: #fff;
|
||||
|
||||
.config-item__upload {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin-right: 20px;
|
||||
border: 1px solid rgb(208, 212, 220);
|
||||
background-color: #fbfdff;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.config-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
min-height: 100px;
|
||||
padding: 16px 0;
|
||||
border-bottom: 1px solid #dfe8f8;
|
||||
|
||||
&:last-child {
|
||||
border: none;
|
||||
}
|
||||
|
||||
::v-deep .u-radio__label, ::v-deep .u-checkbox__label {
|
||||
margin-right: 0;
|
||||
font-size: 28px;
|
||||
|
||||
span {
|
||||
max-width: 400 rpx;
|
||||
line-height: 1.2;
|
||||
}
|
||||
}
|
||||
|
||||
.config-item__left {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.config-item__right {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
padding-left: 30px;
|
||||
|
||||
&.config-item__text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
|
||||
span {
|
||||
max-width: 400px;
|
||||
margin-right: 10px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
word-break: keep-all;
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
}
|
||||
}
|
||||
|
||||
&.config-item__answer {
|
||||
display: block;
|
||||
padding: 20px 0;
|
||||
|
||||
.config-item__left {
|
||||
margin-bottom: 32 rpx;
|
||||
|
||||
span {
|
||||
word-break: break-all;
|
||||
color: #333;
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.config-item__right {
|
||||
width: 100%;
|
||||
padding-left: 0;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .u-checkbox {
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.config-item__checkbox {
|
||||
height: auto;
|
||||
padding: 14px 0;
|
||||
|
||||
::v-deep .u-checkbox, ::v-deep .u-radio {
|
||||
// justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.config-item__point {
|
||||
height: auto;
|
||||
padding: 0;
|
||||
|
||||
::v-deep .u-checkbox {
|
||||
justify-content: inherit;
|
||||
min-height: 100px;
|
||||
padding: 14px 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
|
||||
&:last-child {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.u-checkbox__label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex: 1;
|
||||
margin-right: 0;
|
||||
|
||||
.u-input {
|
||||
flex: 1;
|
||||
max-width: 400px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.add-form__footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 112px;
|
||||
text-align: center;
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
background: #fff;
|
||||
|
||||
&:first-child:active {
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
color: #fff;
|
||||
font-size: 36px;
|
||||
background: #3192F4;
|
||||
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
line-height: 112px;
|
||||
color: #333333;
|
||||
font-size: 32px;
|
||||
|
||||
&:active {
|
||||
background: #eee;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
313
src/project/saas/AppAskForm/FormSetting.vue
Normal file
313
src/project/saas/AppAskForm/FormSetting.vue
Normal file
@@ -0,0 +1,313 @@
|
||||
<template>
|
||||
<div class="form-setting">
|
||||
<h2>表单设置</h2>
|
||||
<div class="form-setting__list">
|
||||
<div class="setting-item">
|
||||
<div class="setting-item__left">
|
||||
<span>截止时间</span>
|
||||
<image :src="`${$cdn}askform/bz.png`" @click="tips = '表单截止后，用户打开表单会提示此表单已结束' , isShowModal = true"/>
|
||||
</div>
|
||||
<div class="setting-item__right">
|
||||
<u-radio-group v-model="periodValidityType" active-color="#1088F9">
|
||||
<u-radio name="0" label="永久有效">永久有效</u-radio>
|
||||
<u-radio name="1" label="自定义时间">自定义时间</u-radio>
|
||||
</u-radio-group>
|
||||
<u-icon name="arrow-right" color="#E1E2E3"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="setting-item" v-if="periodValidityType === '1'" @click="isShowTime = true">
|
||||
<div class="setting-item__left">
|
||||
<span>截至时间</span>
|
||||
</div>
|
||||
<div class="setting-item__right">
|
||||
<span>{{ periodValidityEndTime }}</span>
|
||||
<u-icon name="arrow-right" color="#E1E2E3"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<div class="setting-item__left">
|
||||
<span>匹配客户方式</span>
|
||||
<image :src="`${$cdn}askform/bz.png`" @click="tips = '将参与活动的微信客户和企业微信客户匹配' , isShowModal = true"/>
|
||||
</div>
|
||||
<div class="setting-item__right">
|
||||
<span>客户微信ID匹配</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<div class="setting-item__left">
|
||||
<span>提交次数</span>
|
||||
<image :src="`${$cdn}askform/bz.png`" @click="tips = '此功能发布后不可修改' , isShowModal = true"/>
|
||||
</div>
|
||||
<div class="setting-item__right">
|
||||
<u-radio-group v-model="commitType" active-color="#1088F9">
|
||||
<u-radio name="0" label="不限次数">不限次数</u-radio>
|
||||
<u-radio name="1" label="限提交一次">限提交一次</u-radio>
|
||||
</u-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="setting-item">
|
||||
<div class="setting-item__left">
|
||||
<span>行为通知</span>
|
||||
<image :src="`${$cdn}askform/bz.png`" @click="tips = '当客户点击或者发布表单时，发送表单的员工将会受到消息提醒' , isShowModal = true" />
|
||||
</div>
|
||||
<div class="setting-item__right">
|
||||
<u-switch v-model="actionNotice" active-value="1" :size="40" active-color="#1088F9"></u-switch>
|
||||
</div>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<div class="setting-item__left">
|
||||
<span>动态通知</span>
|
||||
<image :src="`${$cdn}askform/bz.png`" @click="tips = '当客户点击或者发布表单时，会将客户的打开行为记录在客户动态里' , isShowModal = true" />
|
||||
</div>
|
||||
<div class="setting-item__right">
|
||||
<u-switch v-model="dynamicNotice" active-value="1" :size="40" active-color="#1088F9"></u-switch>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="add-form__footer">
|
||||
<div @click="back">
|
||||
<span>取消</span>
|
||||
</div>
|
||||
<div @click="confirm">{{ isEdit ? '发布' : '确定' }}</div>
|
||||
</div>
|
||||
<u-modal v-model="isShowModal" :content="tips"></u-modal>
|
||||
<u-picker mode="time" v-model="isShowTime" :show-time-tag="true" @close="isShowTime = false" @confirm="onTimeChange"
|
||||
:params="params"></u-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
computed: {
|
||||
isEdit() {
|
||||
return this.$route.query.type == 'edit'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
let {id} = this.$route.query
|
||||
return {
|
||||
id,
|
||||
params: {
|
||||
year: true,
|
||||
month: true,
|
||||
day: true,
|
||||
hour: true,
|
||||
minute: true,
|
||||
second: true
|
||||
},
|
||||
tips: '',
|
||||
isShowModal: false,
|
||||
actionNotice: true,
|
||||
dynamicNotice: true,
|
||||
commitType: '1',
|
||||
wechatId: '0',
|
||||
periodValidityEndTime: '',
|
||||
isShowTime: false,
|
||||
periodValidityType: '0',
|
||||
}
|
||||
},
|
||||
created() {
|
||||
document.title = '表单设置'
|
||||
if (this.id) {
|
||||
this.getInfo(this.id)
|
||||
} else this.getFormSetting()
|
||||
},
|
||||
methods: {
|
||||
getFormSetting() {
|
||||
let params = localStorage.getItem("toFormSetting"), res = {}
|
||||
params && (res = JSON.parse(params))
|
||||
localStorage.removeItem("toFormSetting")
|
||||
this.periodValidityType = res.periodValidityType || '0'
|
||||
this.commitType = res.commitType || "1"
|
||||
this.actionNotice = res.actionNotice === '1'
|
||||
this.dynamicNotice = res.dynamicNotice === '1'
|
||||
if (res.periodValidityType === '1') {
|
||||
this.periodValidityEndTime = res.periodValidityEndTime
|
||||
}
|
||||
},
|
||||
onTimeChange(e) {
|
||||
this.periodValidityEndTime = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}:${e.second}`
|
||||
},
|
||||
|
||||
back() {
|
||||
uni.navigateBack({})
|
||||
},
|
||||
|
||||
getInfo(id) {
|
||||
this.$http.post(`/app/appquestionnairetemplate/queryDetailById?id=${id}`).then(res => {
|
||||
if (res?.data) {
|
||||
this.periodValidityType = res.data.periodValidityType
|
||||
this.commitType = res.data.commitType
|
||||
this.actionNotice = res.data.actionNotice === '1'
|
||||
this.dynamicNotice = res.data.dynamicNotice === '1'
|
||||
|
||||
if (res.data.periodValidityType === '1') {
|
||||
this.periodValidityEndTime = res.data.periodValidityEndTime
|
||||
}
|
||||
}
|
||||
}).catch(msg => {
|
||||
this.$u.toast(msg)
|
||||
})
|
||||
},
|
||||
|
||||
publish() {
|
||||
this.$http.post(`/app/appquestionnairetemplate/release`, null, {
|
||||
params: {
|
||||
commitType: this.commitType,
|
||||
periodValidityType: this.periodValidityType,
|
||||
actionNotice: this.actionNotice ? '1' : '0',
|
||||
dynamicNotice: this.dynamicNotice ? '1' : '0',
|
||||
shareStatus: '0',
|
||||
wechatId: '0',
|
||||
id: this.id,
|
||||
periodValidityEndTime: this.periodValidityType === '1' ? this.periodValidityEndTime : ''
|
||||
}
|
||||
}).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.$u.toast('发布成功')
|
||||
this.back()
|
||||
}
|
||||
}).catch(e => {
|
||||
this.$u.toast(e)
|
||||
})
|
||||
},
|
||||
|
||||
confirm() {
|
||||
if (this.isEdit) {
|
||||
this.publish()
|
||||
return false
|
||||
}
|
||||
uni.$emit('setting', {
|
||||
periodValidityType: this.periodValidityType,
|
||||
commitType: this.commitType,
|
||||
actionNotice: this.actionNotice ? '1' : '0',
|
||||
dynamicNotice: this.dynamicNotice ? '1' : '0',
|
||||
periodValidityEndTime: this.periodValidityEndTime ? this.periodValidityEndTime : ''
|
||||
})
|
||||
this.back()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.form-setting {
|
||||
padding: 0 20px;
|
||||
|
||||
.add-form__footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 112px;
|
||||
text-align: center;
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
background: #fff;
|
||||
|
||||
&:first-child:active {
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
color: #fff;
|
||||
font-size: 36px;
|
||||
background: #3192F4;
|
||||
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
line-height: 112px;
|
||||
color: #333333;
|
||||
font-size: 32px;
|
||||
|
||||
&:active {
|
||||
background: #eee;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
& > h2 {
|
||||
height: 80px;
|
||||
padding-top: 24px;
|
||||
font-size: 28px;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.form-setting__list {
|
||||
padding: 0 20px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
|
||||
.setting-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 104px;
|
||||
border-bottom: 1px solid #D8DDE6;
|
||||
|
||||
.setting-item__right {
|
||||
color: #999;
|
||||
font-size: 28px;
|
||||
|
||||
span {
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
::v-deep .u-radio__label {
|
||||
color: #999;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
::v-deep .u-radio {
|
||||
&:last-child {
|
||||
.u-radio__label {
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border: none;
|
||||
}
|
||||
|
||||
& > div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.setting-item__left {
|
||||
color: #666666;
|
||||
font-size: 30px;
|
||||
|
||||
image {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
450
src/project/saas/AppAskForm/PreviewForm.vue
Normal file
450
src/project/saas/AppAskForm/PreviewForm.vue
Normal file
@@ -0,0 +1,450 @@
|
||||
<template>
|
||||
<div class="add-form">
|
||||
<div class="header-pic">
|
||||
<image v-if="form.headPicture" :src="form.headPicture"/>
|
||||
</div>
|
||||
<div class="form-info">
|
||||
<div class="form-info__wrapper">
|
||||
<textarea class="title" :auto-height="true" disabled placeholder="请输入标题 (必填）" v-model="form.title"></textarea>
|
||||
<u-input class="content" disabled :clearable="false" type="textarea" v-model="form.tableExplain"
|
||||
placeholder="请输入表单描述 (选填）" :height="80" :auto-height="true" :maxlength="255"></u-input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="components-list">
|
||||
<div class="components-item" v-for="(item, index) in targetList" :key="index">
|
||||
<div class="components-item__title">
|
||||
<div class="components-item__title--left">
|
||||
<em :style="{opacity: item.required ? 1 : 0}">*</em>
|
||||
<i>{{ index + 1 }}.</i>
|
||||
<h2>{{ item.label }}</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="components-item__filed">
|
||||
<template v-if="(item.type === 'radio')">
|
||||
<u-radio-group :value="formInfo[`field_${index}`]" wrap>
|
||||
<u-radio :name="field.label" v-for="(field, i) in item.options" :key="i">
|
||||
<image :src="field.img[0].url" v-if="field.img.length"/>
|
||||
<span>{{ field.label }}</span>
|
||||
</u-radio>
|
||||
</u-radio-group>
|
||||
</template>
|
||||
<template v-if="(item.type === 'checkbox')">
|
||||
<u-checkbox-group wrap>
|
||||
<u-checkbox :name="field.label" :value="id ? formInfo[`field_${index}`].indexOf(field.label) : false" v-for="(field, i) in item.options" :key="i">
|
||||
<image :src="field.img[0].url" v-if="field.img.length"/>
|
||||
<span>{{ field.label }}</span>
|
||||
</u-checkbox>
|
||||
</u-checkbox-group>
|
||||
</template>
|
||||
<template v-if="(item.type === 'select')">
|
||||
<div class="components-item__select">
|
||||
<span>{{ formInfo[`field_${index}`] || item.placeholder }}</span>
|
||||
<u-icon name="arrow-down" color="#DEDFDF"/>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="(item.type === 'upload')">
|
||||
<image style="display: block; max-width: 100%;margin: 0 auto" v-if="formInfo[`field_${index}`]" :src="formInfo[`field_${index}`]" />
|
||||
<div v-else class="components-item__select components-item__textarea components-item__upload">
|
||||
<image :src="`${$cdn}askform/upload.png`"/>
|
||||
<span>选择图片（10M以内）</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="(item.type === 'input')">
|
||||
<div class="components-item__select">
|
||||
<span>{{ formInfo[`field_${index}`] || item.placeholder }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="(item.type === 'textarea')">
|
||||
<div class="components-item__select components-item__textarea">
|
||||
<span>{{ formInfo[`field_${index}`]|| item.placeholder }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
data() {
|
||||
let params = localStorage.getItem("toPreviewForm")
|
||||
params && (params = JSON.parse(params))
|
||||
localStorage.removeItem("toPreviewForm")
|
||||
return {
|
||||
form: {
|
||||
tableExplain: '详细描述',
|
||||
title: '问卷调查',
|
||||
isShowheadPicture: true,
|
||||
isShowTableExplain: true,
|
||||
isShowBtn: true,
|
||||
headPicture: '',
|
||||
commitType: '1',
|
||||
periodValidityType: '0',
|
||||
actionNotice: '1',
|
||||
dynamicNotice: '1',
|
||||
periodValidityEndTime: '',
|
||||
shareStatus: '0',
|
||||
count: 0,
|
||||
wechatId: '0',
|
||||
type: 0,
|
||||
buttonExplain: '提交',
|
||||
tips: true
|
||||
},
|
||||
templateType: 0,
|
||||
targetList: [],
|
||||
isShow: false,
|
||||
type: 0,
|
||||
id: '',
|
||||
touchStart: 0,
|
||||
...params,
|
||||
formInfo: {}
|
||||
}
|
||||
},
|
||||
|
||||
onLoad (query) {
|
||||
document.title = '表单预览'
|
||||
this.id = query.id || ''
|
||||
query.id && this.getInfo(query.id, query.formId)
|
||||
},
|
||||
|
||||
methods: {
|
||||
getInfo(id, formId) {
|
||||
this.$http.post(`/app/appquestionnairetemplate/queryDataInfoById?id=${formId}&dataId=${id}`).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.formInfo = res.data
|
||||
|
||||
this.targetList.forEach((item, index) => {
|
||||
if (item.type === 'checkbox' && this.formInfo[`field_${index}`]) {
|
||||
this.formInfo[`field_${index}`] = this.formInfo[`field_${index}`].split(',')
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.add-form {
|
||||
min-height: 100vh;
|
||||
padding-bottom: 60px;
|
||||
box-sizing: border-box;
|
||||
background: #F3F6F9;
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
::v-deep .u-drawer-bottom {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.components-list {
|
||||
padding: 0 20px;
|
||||
|
||||
.components-item {
|
||||
margin-top: 24px;
|
||||
padding: 32px;
|
||||
box-shadow: 0 4px 8px 4px rgba(233, 233, 233, 0.39);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #EEEFF0;
|
||||
background: #fff;
|
||||
|
||||
::v-deep .u-radio, ::v-deep .u-checkbox {
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.u-checkbox__icon-wrap, .u-radio__icon-wrap {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
}
|
||||
|
||||
.u-radio__label, .u-checkbox__label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 0;
|
||||
margin-left: 40px;
|
||||
line-height: 1.5;
|
||||
text-align: justify;
|
||||
|
||||
image {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
flex: 1;
|
||||
color: #666;
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
.components-item__select {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
margin-bottom: 8px;
|
||||
padding: 0 26px;
|
||||
border: 1px solid #DEDFDF;
|
||||
|
||||
&.components-item__textarea {
|
||||
align-items: flex-start;
|
||||
height: 160px;
|
||||
padding-top: 20px;
|
||||
|
||||
image {
|
||||
width: 46px;
|
||||
height: 34px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #666;
|
||||
font-size: 26px;
|
||||
}
|
||||
}
|
||||
|
||||
&.components-item__upload {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.components-item__title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 32px;
|
||||
|
||||
em {
|
||||
margin-right: 4px;
|
||||
font-style: normal;
|
||||
color: rgb(226, 33, 32);;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
box-sizing: content-box;
|
||||
padding: 20px 0 20px 20px;
|
||||
}
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
color: #333333;
|
||||
font-size: 32px;
|
||||
|
||||
i {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-weight: 600;
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.add-popup {
|
||||
height: 440px;
|
||||
border-radius: 20px 20px 0 0;
|
||||
background: #fff;
|
||||
|
||||
.add-popup__title {
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 96px;
|
||||
border-bottom: 1px solid #E4E5E6;
|
||||
|
||||
h2 {
|
||||
color: #333333;
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
image {
|
||||
position: absolute;
|
||||
right: 32px;
|
||||
top: 50%;
|
||||
width: 30px;
|
||||
height: 20px;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.add-popup__list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 0 34px;
|
||||
|
||||
span {
|
||||
width: calc((100% - 64px) / 3);
|
||||
height: 78px;
|
||||
line-height: 78px;
|
||||
margin-top: 32px;
|
||||
margin-right: 32px;
|
||||
text-align: center;
|
||||
color: #333333;
|
||||
font-size: 28px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #E4E5E6;
|
||||
|
||||
&:nth-of-type(3n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.add-form__footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 112px;
|
||||
text-align: center;
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
background: #fff;
|
||||
|
||||
&:last-child {
|
||||
color: #fff;
|
||||
font-size: 36px;
|
||||
background: #3192F4;
|
||||
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
line-height: 112px;
|
||||
color: #333333;
|
||||
font-size: 32px;
|
||||
|
||||
&:active {
|
||||
background: #eee;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.add-form__btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 214px;
|
||||
height: 66px;
|
||||
line-height: 66px;
|
||||
margin: 64px auto 0;
|
||||
background: #FFFFFF;
|
||||
border-radius: 34px;
|
||||
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
span {
|
||||
margin-left: 16px;
|
||||
color: #4392E6;
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.form-info {
|
||||
margin-top: 26px;
|
||||
padding: 0 20px;
|
||||
|
||||
& > h2 {
|
||||
height: 76px;
|
||||
line-height: 76px;
|
||||
color: #999999;
|
||||
font-weight: normal;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.form-info__wrapper {
|
||||
padding: 0 18px;
|
||||
background: #fff;
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
padding: 22px 0;
|
||||
font-size: 36px;
|
||||
border-bottom: 1px solid #F1F2F3;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 30px 0 !important;
|
||||
font-size: 28px;
|
||||
|
||||
::v-deep textarea {
|
||||
color: #333;
|
||||
font-size: 28px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-pic {
|
||||
position: relative;
|
||||
font-size: 0;
|
||||
|
||||
span {
|
||||
position: absolute;
|
||||
bottom: 16px;
|
||||
right: 16px;
|
||||
z-index: 1;
|
||||
width: 148px;
|
||||
height: 56px;
|
||||
line-height: 56px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 26px;
|
||||
background: rgba(0, 0, 0, 0.16);
|
||||
border-radius: 28px;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 320px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
166
src/project/saas/AppAskForm/Result.vue
Normal file
166
src/project/saas/AppAskForm/Result.vue
Normal file
@@ -0,0 +1,166 @@
|
||||
<template>
|
||||
<div class="result">
|
||||
<image class="result-success" :src="`${$cdn}form/result-success.png`"/>
|
||||
<h2>创建成功</h2>
|
||||
<p>表单创建成功，您现在可以把表单分享给更多的好友，来填写数据！</p>
|
||||
<div class="result-btn" @click="confirm">确定</div>
|
||||
<div class="result-footer">
|
||||
<div class="result-footer__item" @click="copy">
|
||||
<div>
|
||||
<image :src="`${$cdn}form/form-copylink.png`"/>
|
||||
</div>
|
||||
<h3>复制链接</h3>
|
||||
</div>
|
||||
<div class="result-footer__item" @click="shareWechat">
|
||||
<div>
|
||||
<image :src="`${$cdn}form/form-wechat.png`"/>
|
||||
</div>
|
||||
<h3>微信好友</h3>
|
||||
</div>
|
||||
<div class="result-footer__item" @click="share">
|
||||
<div>
|
||||
<image :src="`${$cdn}form/form-share.png`"/>
|
||||
</div>
|
||||
<h3>分享</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapActions} from 'vuex'
|
||||
import qs from "query-string"
|
||||
|
||||
export default {
|
||||
name: 'Result',
|
||||
|
||||
computed: {
|
||||
params() {
|
||||
return qs.parse(decodeURIComponent(location.search))
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
document.title = '表单创建成功'
|
||||
this.injectJWeixin(['sendChatMessage'])
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['injectJWeixin', 'wxInvoke']),
|
||||
copy() {
|
||||
let oInput = document.createElement('input')
|
||||
oInput.value = this.params.linkUrl
|
||||
document.body.appendChild(oInput)
|
||||
oInput.select()
|
||||
document.execCommand('Copy')
|
||||
this.$u.toast('已复制')
|
||||
oInput.remove()
|
||||
},
|
||||
share() {
|
||||
this.injectJWeixin(['shareAppMessage', 'shareWechatMessage']).then(() => {
|
||||
this.wxInvoke(['shareAppMessage', {
|
||||
title: this.params.title,
|
||||
desc: this.params.tableExplain,
|
||||
link: this.params.linkUrl,
|
||||
imgUrl: this.params.headPicture
|
||||
}])
|
||||
})
|
||||
},
|
||||
shareWechat() {
|
||||
this.injectJWeixin(['shareAppMessage', 'shareWechatMessage']).then(() => {
|
||||
this.wxInvoke(['shareWechatMessage', {
|
||||
title: this.params.title,
|
||||
desc: this.params.tableExplain,
|
||||
link: this.params.linkUrl,
|
||||
imgUrl: this.params.headPicture
|
||||
}])
|
||||
})
|
||||
},
|
||||
confirm() {
|
||||
uni.navigateBack({
|
||||
delta: 2
|
||||
})
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
wx.hideOptionMenu();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.result {
|
||||
min-height: 100vh;
|
||||
padding: 96px 96px 0;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
background: #fff;
|
||||
|
||||
.result-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 96px;
|
||||
|
||||
.result-footer__item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin: 0 auto 16px;
|
||||
border-radius: 50%;
|
||||
background: #F4F6FA;
|
||||
|
||||
image {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: #666666;
|
||||
font-size: 24px;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.result-success {
|
||||
display: block;
|
||||
width: 192px;
|
||||
height: 192px;
|
||||
margin: 0 auto 16px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 16px 0 32px;
|
||||
color: #999999;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.result-btn {
|
||||
width: 100%;
|
||||
height: 88px;
|
||||
line-height: 88px;
|
||||
text-align: center;
|
||||
font-size: 36px;
|
||||
color: #fff;
|
||||
background: #197DF0;
|
||||
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.02);
|
||||
border-radius: 4px;
|
||||
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #333333;
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
444
src/project/saas/AppAskForm/Statistical.vue
Normal file
444
src/project/saas/AppAskForm/Statistical.vue
Normal file
@@ -0,0 +1,444 @@
|
||||
<template>
|
||||
<div class="statistical" v-if="pageShow">
|
||||
<div class="statistical-tab">
|
||||
<span :class="[currIndex === 0 ? 'active' : '']" @click="currIndex = 0">问卷统计</span>
|
||||
<span :class="[currIndex === 1 ? 'active' : '']" @click="currIndex = 1">人员统计</span>
|
||||
</div>
|
||||
<div class="statistical-content">
|
||||
<div class="list-wrapper" v-show="currIndex === 0">
|
||||
<div class="top">
|
||||
<span>共</span>
|
||||
<i>{{ subjectList.length }}</i>
|
||||
<span>题，其中</span>
|
||||
<span v-for="(item, index) in fieldTypeCount" :key="index">
|
||||
{{ mapType(item.field_type) }}<i>{{ item.c }}</i>道{{ fieldTypeCount.length - 1 === index ? '' : '，' }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="topic-list">
|
||||
<div class="topic-item" :class="[['radio', 'checkbox', 'select'].indexOf(item.fieldType) === -1 ? 'topic-item__active' : '']" v-for="(item, index) in subjectList" :key="index">
|
||||
<template v-if="['radio', 'checkbox', 'select'].indexOf(item.fieldType) > -1">
|
||||
<h2>{{ item.fieldName }}（{{ item.fixedLabel }}）</h2>
|
||||
<div class="topic-item__wrapper">
|
||||
<div class="option-item" v-for="(filed, i) in item.options" :key="i">
|
||||
<div class="option-item__left">
|
||||
<h2>{{ filed.label }}：</h2>
|
||||
<!-- <span>每周监测</span> -->
|
||||
</div>
|
||||
<div class="option-item__right">
|
||||
<span>{{ filed.c || 0}}票</span>
|
||||
<span>{{ (((filed.c || 0) / fieldDataCount[`field_${index}`]) * 100).toFixed(2) }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<h2 class="topic-item__left">{{ item.fieldName }}（{{ item.fixedLabel }}）</h2>
|
||||
<span>共{{ fieldDataCount[`field_${index}`] }}条数据</span>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="user-list" v-show="currIndex === 1">
|
||||
<div class="user-item" v-for="(item, index) in list" :key="index">
|
||||
<div class="user-item__left">
|
||||
<image src="./components/img/user-icon.png" />
|
||||
<div class="right">
|
||||
<div class="right-top">
|
||||
<h2 v-if="item.userType === 'wxuser'">{{ item.nickName }}</h2>
|
||||
<AiOpenData v-else type="userName" :openid="item.nickName"/>
|
||||
</div>
|
||||
<p>{{ item.commitTime }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="user-item__right">
|
||||
<p>分值: {{ item.totalScore }}</p>
|
||||
<div @click="toPreview(item.id)">查看表单</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
appName: '调查结果',
|
||||
|
||||
name: 'Statistical',
|
||||
|
||||
data () {
|
||||
return {
|
||||
id: '',
|
||||
currIndex: 0,
|
||||
targetList: [],
|
||||
info: {},
|
||||
subjectList: [],
|
||||
tableData: [],
|
||||
total: 0,
|
||||
pageShow: false,
|
||||
form: {},
|
||||
search: {
|
||||
size: 15,
|
||||
current: 1
|
||||
},
|
||||
isMore: false,
|
||||
fieldTypeCount: [],
|
||||
fieldValueDistribution: [],
|
||||
fieldDataCount: {},
|
||||
isShowForm: false,
|
||||
targetList: [],
|
||||
formInfo: {},
|
||||
list: []
|
||||
}
|
||||
},
|
||||
|
||||
onLoad (query) {
|
||||
this.$loading()
|
||||
this.id = query.id
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.getInfo()
|
||||
this.getFormInfo()
|
||||
|
||||
this.$dict.load(['wxUserType']).then(() => {
|
||||
this.getList()
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
methods: {
|
||||
getInfo () {
|
||||
this.$http.post(`/app/appquestionnairetemplate/queryDetailById?id=${this.id}`).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.info = res.data
|
||||
this.targetList = res.data.fields.map(item => {
|
||||
return JSON.parse(item.fieldInfo)
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
toPreview(id) {
|
||||
localStorage.setItem("toPreviewForm", JSON.stringify({form: this.info, targetList: this.targetList}))
|
||||
uni.navigateTo({url: `./PreviewForm?id=${id}&formId=${this.info.id}`})
|
||||
},
|
||||
|
||||
getList() {
|
||||
if (this.isMore) return
|
||||
this.$http.post(`/app/appquestionnairetemplate/statisticsResident?id=${this.id}`, null, {
|
||||
params: {
|
||||
...this.search
|
||||
}
|
||||
}).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()
|
||||
})
|
||||
},
|
||||
|
||||
mapType(type) {
|
||||
return {
|
||||
upload: '上传图片',
|
||||
input: '单行填空',
|
||||
textarea: '多行填空',
|
||||
radio: '单选',
|
||||
checkbox: '多选',
|
||||
select: '单下拉框'
|
||||
}[type]
|
||||
},
|
||||
|
||||
getFormInfo() {
|
||||
this.$http.post(`/app/appquestionnairetemplate/statisticsTable?id=${this.id}`, null, {
|
||||
params: {
|
||||
...this.search
|
||||
}
|
||||
}).then(res => {
|
||||
this.$hideLoading()
|
||||
if (res.code == 0) {
|
||||
this.fieldDataCount = res.data.fieldDataCount
|
||||
this.fieldTypeCount = res.data.fieldTypeCount
|
||||
this.fieldValueDistribution = res.data.fieldValueDistribution
|
||||
this.subjectList = res.data.appQuestionnaireTemplate.fields.map((item, index) => {
|
||||
const fieldInfo = JSON.parse(item.fieldInfo)
|
||||
let options = fieldInfo.options
|
||||
if (['radio', 'checkbox', 'select'].indexOf(item.fieldType) > -1) {
|
||||
options = fieldInfo.options.map(v => {
|
||||
res.data.fieldValueDistribution[`field_${index}`].forEach(info => {
|
||||
if (info.fieldValue === v.label) {
|
||||
v.c = info.c
|
||||
}
|
||||
})
|
||||
|
||||
return v
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
return {
|
||||
...item,
|
||||
...fieldInfo,
|
||||
options
|
||||
}
|
||||
})
|
||||
|
||||
this.pageShow = true
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
onReachBottom() {
|
||||
this.getList()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.statistical {
|
||||
padding-top: 112px;
|
||||
padding-bottom: 60px;
|
||||
|
||||
.user-list {
|
||||
padding: 0 32px;
|
||||
background: #f5f5f5;
|
||||
|
||||
.user-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 160px;
|
||||
margin-top: 24px;
|
||||
padding: 32px;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.02);
|
||||
border-radius: 16px;
|
||||
|
||||
.user-item__right {
|
||||
font-size: 30px;
|
||||
text-align: center;
|
||||
|
||||
p {
|
||||
line-height: 40px;
|
||||
margin-bottom: 16px;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
div {
|
||||
color: #1365DD;
|
||||
}
|
||||
}
|
||||
|
||||
.user-item__left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.right {
|
||||
p {
|
||||
color: #999999;
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.right-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
line-height: 40px;
|
||||
|
||||
h2 {
|
||||
max-width: 300px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-right: 20px;
|
||||
font-size: 30px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #999999;
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
image {
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
margin-right: 16px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
i {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.list-wrapper {
|
||||
padding-bottom: 40px;
|
||||
|
||||
.top {
|
||||
padding: 36px 32px 32px;
|
||||
text-align: justify;
|
||||
font-size: 34px;
|
||||
color: #333;
|
||||
border-bottom: 4px solid #f3f6f9;
|
||||
|
||||
i {
|
||||
color: #347FFF;
|
||||
}
|
||||
}
|
||||
|
||||
.topic-item {
|
||||
padding: 40px 32px 0;
|
||||
|
||||
& > h2 {
|
||||
line-height: 44px;
|
||||
color: #333333;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
&.topic-item__active {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin: 40px 32px 0;
|
||||
padding: 34px 32px;
|
||||
background: #EFF7FF;
|
||||
border-radius: 16px;
|
||||
border: 1px solid #CCCCCC;
|
||||
|
||||
h2 {
|
||||
flex: 1;
|
||||
margin-right: 9px;
|
||||
font-weight: 600;
|
||||
font-size: 32px;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
.option-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 24px;
|
||||
padding: 34px 32px;
|
||||
border-radius: 16px;
|
||||
border: 1px solid #CCCCCC;
|
||||
background: #F5F5F5;
|
||||
|
||||
& > div {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-weight: 600;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.option-item__left {
|
||||
flex: 1;
|
||||
margin-right: 18px;
|
||||
font-weight: 600;
|
||||
font-size: 32px;
|
||||
color: #333333;
|
||||
|
||||
span {
|
||||
flex: 1;
|
||||
text-align: justify;
|
||||
}
|
||||
}
|
||||
|
||||
.option-item__right {
|
||||
align-items: center;
|
||||
span {
|
||||
color: #666666;
|
||||
font-size: 28px;
|
||||
|
||||
&:first-child {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.statistical-content {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.statistical-tab {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
align-items: center;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 11;
|
||||
width: 100%;
|
||||
height: 96px;
|
||||
padding: 0 32px;
|
||||
border-bottom: 1px solid #D4D4D4;
|
||||
background: #fff;
|
||||
|
||||
span {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
line-height: 96px;
|
||||
text-align: center;
|
||||
color: #000;
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
z-index: 1;
|
||||
width: 192px;
|
||||
height: 6px;
|
||||
background: transparent;
|
||||
transform: translateX(-50%);
|
||||
content: ' ';
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: #1365DD;
|
||||
|
||||
&::after {
|
||||
background: #1365DD;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
182
src/project/saas/AppAskForm/components/AddList.vue
Normal file
182
src/project/saas/AppAskForm/components/AddList.vue
Normal file
@@ -0,0 +1,182 @@
|
||||
<template>
|
||||
<div class="template-wrapper">
|
||||
<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>
|
||||
import qs from "query-string"
|
||||
|
||||
export default {
|
||||
name: 'addList',
|
||||
label: '新建项目',
|
||||
|
||||
data() {
|
||||
return {
|
||||
itemList: [{
|
||||
name: '问卷调查'
|
||||
}, {
|
||||
name: '考试测评'
|
||||
}, {
|
||||
name: '报名登记'
|
||||
}, {
|
||||
name: '满意调查'
|
||||
}, {
|
||||
name: '投票评选'
|
||||
}],
|
||||
list: []
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
toAdd(type) {
|
||||
uni.navigateTo({url: `./AddForm?${qs.stringify({type})}`})
|
||||
},
|
||||
quote(id) {
|
||||
uni.navigateTo({url: `./AddForm?${qs.stringify({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-wrapper {
|
||||
padding-bottom: 120px;
|
||||
|
||||
.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>
|
||||
532
src/project/saas/AppAskForm/components/List.vue
Normal file
532
src/project/saas/AppAskForm/components/List.vue
Normal file
@@ -0,0 +1,532 @@
|
||||
<template>
|
||||
<div class="form">
|
||||
<AiTopFixed>
|
||||
<u-search placeholder="请输入标题" :show-action="false" search-icon-color="#ccc" v-model="search.title"
|
||||
@search="isMore = false, search.current = 1, getList()"/>
|
||||
</AiTopFixed>
|
||||
<scroll-view show-scrollbar scroll-y @scrolltolower="getList" class="form-list">
|
||||
<div class="form-item" v-for="(item, index) in list" :key="index"
|
||||
@click="showPopup(item)">
|
||||
<div class="form-item__top">
|
||||
<div class="form-item__left">
|
||||
<h2>{{ item.title }}</h2>
|
||||
<div class="form-item__left--info">
|
||||
<!-- <AiOpenData v-if="item.createUnitName" type="departmentName" :openid="item.createUnitName"/>-->
|
||||
<AiOpenData v-if="item.createUserName" type="userName" :openid="item.createUserName"/>
|
||||
<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>
|
||||
<u-gap/>
|
||||
<AiEmpty v-if="!list.length && isMore"></AiEmpty>
|
||||
</scroll-view>
|
||||
<u-popup v-model="isShow" :closeable="false" mode="bottom" :z-index="11">
|
||||
<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('./AppForm?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="isShowModal = true" 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 class="operate-item" @click="toResult(id)">
|
||||
<div>
|
||||
<image :src="`${$cdn}askform/total.png`"/>
|
||||
</div>
|
||||
<h3>调查结果</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="popup-btn" @click="isShow = false">关闭</div>
|
||||
</div>
|
||||
</u-popup>
|
||||
<u-modal v-model="isShowModal" show-cancel-button content="确定停止该表单?" @confirm="toStop"></u-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapActions} from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'formList',
|
||||
label: '表单列表',
|
||||
data() {
|
||||
return {
|
||||
search: {
|
||||
current: 1,
|
||||
templateType: 0,
|
||||
title: ''
|
||||
},
|
||||
isShowModal: false,
|
||||
value: '',
|
||||
id: '',
|
||||
info: {},
|
||||
isMore: false,
|
||||
list: [],
|
||||
linkUrl: '',
|
||||
isShow: false
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// this.$loading()
|
||||
this.$dict.load(['questionnaireStatus', 'questionnaireType', 'questionnaireFieldType']).then(() => {
|
||||
this.getList()
|
||||
})
|
||||
},
|
||||
|
||||
methods: {
|
||||
...mapActions(['wxInvoke']),
|
||||
linkTo(url) {
|
||||
this.isShow = false
|
||||
|
||||
uni.navigateTo({
|
||||
url
|
||||
})
|
||||
},
|
||||
|
||||
showPopup(item) {
|
||||
this.info = item
|
||||
this.id = item.id
|
||||
|
||||
this.info = item
|
||||
this.id = item.id
|
||||
this.isShow = true
|
||||
|
||||
this.$http.post(`/app/appquestionnairetemplate/queryQrCode?id=${item.id}`).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.linkUrl = res.data.linkUrl
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
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 => {
|
||||
if (data.tapIndex === 2) {
|
||||
this.copy(this.linkUrl)
|
||||
this.isShow = false
|
||||
}
|
||||
if (data.tapIndex === 0 || data.tapIndex === 1) {
|
||||
if (data.tapIndex === 0) {
|
||||
this.wxInvoke(['shareAppMessage', {
|
||||
title: this.info.title,
|
||||
desc: this.info.tableExplain,
|
||||
link: this.linkUrl,
|
||||
imgUrl: this.info.headPicture
|
||||
}, () => {
|
||||
this.isShow = false
|
||||
}])
|
||||
} else {
|
||||
this.wxInvoke(['shareWechatMessage', {
|
||||
title: this.info.title,
|
||||
desc: this.info.tableExplain,
|
||||
link: this.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(`./FormSetting?id=${this.info.id}&type=edit`)
|
||||
this.isShow = false
|
||||
},
|
||||
|
||||
toResult () {
|
||||
if (this.info.dataCount < 1) {
|
||||
this.$confirm('暂无调查结果信息', '', {
|
||||
showCancel: false
|
||||
})
|
||||
|
||||
return false
|
||||
}
|
||||
|
||||
this.linkTo(`./Statistical?id=${this.info.id}`)
|
||||
},
|
||||
|
||||
toEdit() {
|
||||
if (this.info.dataCount !== 0) {
|
||||
return this.$u.toast('该表单已有数据，无法编辑!')
|
||||
} else {
|
||||
let {id} = this
|
||||
this.isShow = false
|
||||
uni.navigateTo({url: `./AddForm?id=${id}`})
|
||||
}
|
||||
},
|
||||
|
||||
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 {
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
|
||||
u-radio + u-radio {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
::v-deep .u-search {
|
||||
margin-bottom: 0 !important;
|
||||
|
||||
.u-search__content__input {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.form-list {
|
||||
height: calc(100vh - 98px - 100px);
|
||||
background: #f5f5f5;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.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, div {
|
||||
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>
|
||||
66
src/project/saas/AppAskForm/components/Tabbar.vue
Normal file
66
src/project/saas/AppAskForm/components/Tabbar.vue
Normal file
@@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<div class="form-wrapper">
|
||||
<div class="form-content">
|
||||
<list ref="list" v-if="currIndex === 0" @change="onChange"/>
|
||||
<add-list ref="addList" v-if="currIndex === 1" @change="onChange"/>
|
||||
</div>
|
||||
<AiTabbar :active.sync="currIndex" :list="tabBar"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AddList from './AddList.vue'
|
||||
import List from './List.vue'
|
||||
|
||||
export default {
|
||||
name: 'AppAskForm',
|
||||
appName: '问卷表单',
|
||||
|
||||
data() {
|
||||
return {
|
||||
currIndex: 0
|
||||
}
|
||||
},
|
||||
|
||||
components: {
|
||||
AddList,
|
||||
List
|
||||
},
|
||||
computed: {
|
||||
tabBar() {
|
||||
const link = icon => `${this.$cdn}askform/${icon}.png`
|
||||
return [
|
||||
{text: "表单列表", iconPath: "bdlb1", selectedIconPath: "bdlb2"},
|
||||
{text: "新建项目", iconPath: "xjxm1", selectedIconPath: "xjxm2"}
|
||||
].map(e => ({
|
||||
...e,
|
||||
iconPath: link(e.iconPath),
|
||||
selectedIconPath: link(e.selectedIconPath)
|
||||
}))
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onChange(e) {
|
||||
this.$emit('change', e)
|
||||
},
|
||||
show() {
|
||||
if (this.currIndex == 0) {
|
||||
this.currIndex = -1
|
||||
this.$nextTick(() => {
|
||||
this.currIndex = 0
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
onReachBottom() {
|
||||
if (this.currIndex === 0) {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.form-wrapper {
|
||||
// padding-bottom: 98px;
|
||||
}
|
||||
</style>
|
||||
163
src/project/saas/AppAskForm/components/config.js
Normal file
163
src/project/saas/AppAskForm/components/config.js
Normal file
@@ -0,0 +1,163 @@
|
||||
export const components = [
|
||||
{
|
||||
type: 'radio',
|
||||
label: '单选',
|
||||
fixedLabel: '单选',
|
||||
value: '',
|
||||
points: '',
|
||||
icon: 'iconradio',
|
||||
isShowPoints: false,
|
||||
required: true,
|
||||
hasAnswer: false,
|
||||
answer: '',
|
||||
pointType: '0',
|
||||
pointDict: [
|
||||
{
|
||||
dictName: '此题有唯一答案和分值',
|
||||
dictValue: '0'
|
||||
},
|
||||
{
|
||||
dictName: '每个选项都有对应分值',
|
||||
dictValue: '1'
|
||||
}
|
||||
],
|
||||
options: [
|
||||
{
|
||||
label: '选项1',
|
||||
value: '',
|
||||
point: '',
|
||||
img: []
|
||||
},
|
||||
{
|
||||
label: '选项2',
|
||||
value: '',
|
||||
point: '',
|
||||
img: []
|
||||
}
|
||||
],
|
||||
title: ''
|
||||
},
|
||||
{
|
||||
type: 'checkbox',
|
||||
label: '多选',
|
||||
fixedLabel: '多选',
|
||||
points: '',
|
||||
icon: 'iconcheck_box',
|
||||
isShowPoints: false,
|
||||
required: true,
|
||||
hasAnswer: false,
|
||||
answer: [],
|
||||
value: [],
|
||||
pointType: '0',
|
||||
pointDict: [
|
||||
{
|
||||
dictName: '此题有唯一答案和分值',
|
||||
dictValue: '0'
|
||||
},
|
||||
{
|
||||
dictName: '每个选项都有对应分值',
|
||||
dictValue: '1'
|
||||
},
|
||||
{
|
||||
dictName: '答对几项得几分，答错不得分',
|
||||
dictValue: '2'
|
||||
}
|
||||
],
|
||||
options: [
|
||||
{
|
||||
label: '选项1',
|
||||
value: '',
|
||||
point: '',
|
||||
img: [],
|
||||
checked: false
|
||||
},
|
||||
{
|
||||
label: '选项2',
|
||||
point: '',
|
||||
value: '',
|
||||
img: [],
|
||||
checked: false
|
||||
}
|
||||
],
|
||||
title: ''
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
label: '单下拉框',
|
||||
fixedLabel: '单下拉框',
|
||||
value: '',
|
||||
points: '',
|
||||
icon: 'iconSelect',
|
||||
isShowPoints: false,
|
||||
required: true,
|
||||
hasAnswer: false,
|
||||
answer: '',
|
||||
pointType: '0',
|
||||
placeholder: '请选择',
|
||||
pointDict: [
|
||||
{
|
||||
dictName: '此题有唯一答案和分值',
|
||||
dictValue: '0'
|
||||
},
|
||||
{
|
||||
dictName: '每个选项都有对应分值',
|
||||
dictValue: '1'
|
||||
}
|
||||
],
|
||||
options: [
|
||||
{
|
||||
label: '选项1',
|
||||
value: '',
|
||||
point: '',
|
||||
img: []
|
||||
},
|
||||
{
|
||||
label: '选项2',
|
||||
value: '',
|
||||
point: '',
|
||||
img: []
|
||||
}
|
||||
],
|
||||
title: ''
|
||||
},
|
||||
{
|
||||
type: 'input',
|
||||
label: '单行填空',
|
||||
fixedLabel: '单行填空',
|
||||
value: '',
|
||||
pointType: '0',
|
||||
icon: 'icontext_box',
|
||||
isShowPoints: false,
|
||||
points: '',
|
||||
required: true,
|
||||
hasAnswer: false,
|
||||
placeholder: '请输入...',
|
||||
answer: ''
|
||||
},
|
||||
{
|
||||
type: 'textarea',
|
||||
label: '多行填空',
|
||||
fixedLabel: '多行填空',
|
||||
pointType: '0',
|
||||
icon: 'icontext_area',
|
||||
points: '',
|
||||
isShowPoints: false,
|
||||
required: true,
|
||||
hasAnswer: false,
|
||||
answer: '',
|
||||
placeholder: '请输入...',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
type: 'upload',
|
||||
label: '上传图片',
|
||||
fixedLabel: '上传图片',
|
||||
value: '',
|
||||
icon: 'iconpic',
|
||||
isShowPoints: false,
|
||||
points: '',
|
||||
required: true,
|
||||
hasAnswer: false,
|
||||
answer: ''
|
||||
}
|
||||
];
|
||||
339
src/project/saas/AppAskForm/components/formDetail.vue
Normal file
339
src/project/saas/AppAskForm/components/formDetail.vue
Normal file
@@ -0,0 +1,339 @@
|
||||
<template>
|
||||
<section class="formDetail">
|
||||
<AiResult v-if="result.tips" v-bind="result">
|
||||
<template v-if="isExam" #extra>
|
||||
<div flex class="scorePane">
|
||||
<div>成绩</div>
|
||||
<div class="fill"><em v-html="score"/> 分</div>
|
||||
</div>
|
||||
</template>
|
||||
</AiResult>
|
||||
<template v-else-if="form.id">
|
||||
<image v-if="form.headPicture" class="headPicture" :src="form.headPicture"/>
|
||||
<b class="title">{{ form.title || "标题" }}</b>
|
||||
<div class="tableExplain">{{ form.tableExplain }}</div>
|
||||
<u-form class="content" label-position="top">
|
||||
<u-form-item class="item" v-for="(op,i) in fields" :key="i" :label="(i+1)+'.'+op.fieldName"
|
||||
:required="op.fieldInfo.required==1">
|
||||
<template v-if="op.fieldType=='input'">
|
||||
<input v-model="op.fieldValue" :placeholder="op.fieldInfo.placeholder" :disabled="isResult"/>
|
||||
</template>
|
||||
<template v-else-if="op.fieldType=='textarea'">
|
||||
<textarea v-model="op.fieldValue" :disabled="isResult" :placeholder="op.fieldInfo.placeholder"/>
|
||||
</template>
|
||||
<template v-else-if="op.fieldType=='upload'">
|
||||
<AiUploader @list="v=>op.fieldValue=v.map(e=>e.url)" :def="op.fieldValue" :disabled="isResult"
|
||||
preview action="/admin/file/add2"/>
|
||||
</template>
|
||||
<u-row v-else-if="op.fieldType=='radio'">
|
||||
<radio-group @change="({detail})=>op.fieldValue=detail.value">
|
||||
<div class="option" flex v-for="option in op.fieldInfo.options" :key="option.label">
|
||||
<radio :value="option.label" :disabled="isResult" :checked="op.fieldValue==option.label"/>
|
||||
<AiImage v-if="option.img" :src="option.img" preview/>
|
||||
<div class="label fill">{{ option.label }}</div>
|
||||
</div>
|
||||
</radio-group>
|
||||
</u-row>
|
||||
<u-row v-else-if="op.fieldType=='checkbox'">
|
||||
<checkbox-group @change="({detail})=>op.fieldValue=detail.value">
|
||||
<div class="option" flex v-for="option in op.fieldInfo.options" :key="option.label">
|
||||
<checkbox :value="option.label" :disabled="isResult"
|
||||
:checked="option.checked"/>
|
||||
<AiImage v-if="option.img" :src="option.img" preview/>
|
||||
<div class="label fill">{{ option.label }}</div>
|
||||
</div>
|
||||
</checkbox-group>
|
||||
</u-row>
|
||||
<template v-else-if="op.fieldType=='select'">
|
||||
<AiSelect @data="v=>op.fieldValue=v.map(e=>e.value)" :list="op.fieldInfo.options" :disabled="isResult">
|
||||
<div class="option" flex>
|
||||
<div class="label fill" v-if="op.fieldValue">{{ op.fieldValue.toString() }}</div>
|
||||
<i class="fill" v-else>请选择</i>
|
||||
<u-icon name="arrow-right" color="#ddd"/>
|
||||
</div>
|
||||
</AiSelect>
|
||||
</template>
|
||||
</u-form-item>
|
||||
</u-form>
|
||||
<div class="bottom" v-if="!(isPreview||isResult)">
|
||||
<div class="bottomBtn" @tap="handleSubmit">提交</div>
|
||||
</div>
|
||||
</template>
|
||||
<AiLoading v-else tips="调查问卷加载中..."/>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import {mapMutations, mapState} from "vuex";
|
||||
|
||||
export default {
|
||||
name: "formDetail",
|
||||
inject: {root: {}},
|
||||
computed: {
|
||||
...mapState(['openUser', 'token']),
|
||||
isExam() {
|
||||
return this.form?.type == 1
|
||||
},
|
||||
isResult() {
|
||||
return !!this.$route.query?.result
|
||||
},
|
||||
isPreview() {
|
||||
return !!this.$route.query?.preview
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
form: {},
|
||||
fields: [],
|
||||
checkUser: false,
|
||||
result: {},
|
||||
score: 0
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
form: {
|
||||
deep: true,
|
||||
handler(v) {
|
||||
this.fields = v?.fields?.map(e => {
|
||||
let fieldInfo = JSON.parse(e.fieldInfo)
|
||||
fieldInfo?.options?.map(op => {
|
||||
op.img = op?.img?.[0]?.url
|
||||
op.checked = !!e.fieldValue?.split(",")?.includes(op.label)
|
||||
})
|
||||
if (e.fieldType == 'select') {
|
||||
fieldInfo.options = fieldInfo.options.map(e => ({...e, value: e.label, label: e.label}))
|
||||
}
|
||||
return {...e, fieldInfo}
|
||||
}) || []
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['logout']),
|
||||
getForm() {
|
||||
let {id} = this.$route.query
|
||||
this.$http.post("/app/appquestionnairetemplate/queryDetailById", null, {
|
||||
withoutToken: true,
|
||||
params: {id}
|
||||
}).then(res => {
|
||||
if (res?.data) {
|
||||
this.form = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
getResult() {
|
||||
let {id} = this.$route.query
|
||||
this.$http.post("/app/appquestionnairetemplate/commitCheck", null, {
|
||||
params: {id}
|
||||
}).then(res => {
|
||||
if (res?.data) {
|
||||
this.form = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
validateForm() {
|
||||
return !this.fields.some(e => {
|
||||
if (!!e?.fieldInfo?.required && !e.fieldValue?.toString()) {
|
||||
this.$u.toast(e.fieldName + "不能为空!")
|
||||
return true
|
||||
}
|
||||
})
|
||||
},
|
||||
handleSubmit() {
|
||||
if (this.validateForm()) {
|
||||
this.handleScore()
|
||||
let {avatar: avatarUrl, openId, name: nickName, type: userType, unionId, corpName} = this.openUser
|
||||
this.$http.post("/app/appquestionnairetemplate/commit", {
|
||||
fields: this.fields.map(e => ({
|
||||
...e,
|
||||
fieldInfo: JSON.stringify(e.fieldInfo),
|
||||
fieldValue: e.fieldValue?.toString()
|
||||
})),
|
||||
avatarUrl, openId, nickName, userType, unionId, corpName,
|
||||
totalScore: this.score,
|
||||
questionnaireTemplateId: this.$route.query.id
|
||||
}).then(res => {
|
||||
if (res?.code == 0) {
|
||||
this.result = {
|
||||
tips: "提交成功！感谢参与",
|
||||
}
|
||||
}
|
||||
}).catch(err => {
|
||||
this.$u.toast(err || "提交失败")
|
||||
})
|
||||
}
|
||||
},
|
||||
handleScore() {
|
||||
this.score = 0
|
||||
this.isExam && this.fields.map(field => {
|
||||
let item = field?.fieldInfo || {}
|
||||
let current = 0
|
||||
const calcScore = point => (current += (Number(point) || 0))
|
||||
if (item?.pointType == 0) {//此题有唯一答案和分值
|
||||
field.fieldValue?.toString() == item.answer?.toString() && calcScore(item?.points)
|
||||
} else if (item?.pointType == 1) {//每个选项都有对应分值
|
||||
item?.options?.map(op => {
|
||||
if (typeof field.fieldValue == "object") {
|
||||
if (field.fieldValue?.includes(op.label)) {
|
||||
calcScore(op.point)
|
||||
}
|
||||
} else {
|
||||
op.label == field.fieldValue && calcScore(op.point)
|
||||
}
|
||||
})
|
||||
} else if (item?.pointType == 2) {//答对几项得几分,答错不得分
|
||||
item?.options?.some(op => {
|
||||
if (typeof field.fieldValue == "object") {
|
||||
if (field.fieldValue?.includes(op.label)) {
|
||||
if (item.answer?.includes(op.label)) calcScore(op.point)
|
||||
else return current = 0
|
||||
}
|
||||
} else {
|
||||
op.label == field.fieldValue && calcScore(op.point)
|
||||
}
|
||||
})
|
||||
}
|
||||
this.score += current
|
||||
//打印每题打分
|
||||
if (!!field.fieldValue) {
|
||||
const typeResult = (reply, answer) => {
|
||||
console.log("题目:%s,回答:%s,得分:%s,总分:%s \n 答案:%s", field.fieldName,
|
||||
reply, current, this.score, answer)
|
||||
}
|
||||
typeResult(field.fieldValue?.toString(), item.answer?.toString())
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.isResult ? this.getResult() : this.getForm()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.formDetail {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #fff;
|
||||
|
||||
.headPicture {
|
||||
width: 100%;
|
||||
height: 320px;
|
||||
|
||||
.img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
padding: 32px;
|
||||
box-sizing: border-box;
|
||||
font-size: 34px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
line-height: 48px;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
padding: 32px;
|
||||
box-sizing: border-box;
|
||||
background: #fff;
|
||||
z-index: 99;
|
||||
|
||||
.bottomBtn {
|
||||
width: 100%;
|
||||
line-height: 96px;
|
||||
background: #287DE1;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
height: 96px;
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.tableExplain {
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
color: #666;
|
||||
padding: 32px 24px;
|
||||
}
|
||||
|
||||
::v-deep .u-form-item {
|
||||
.u-form-item--left {
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.u-form-item--right__content__slot > * {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.display {
|
||||
justify-content: space-between;
|
||||
min-height: 58px;
|
||||
}
|
||||
|
||||
.uni-radio-input, .uni-checkbox-input {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
.label {
|
||||
flex-shrink: 0;
|
||||
|
||||
* + & {
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.option {
|
||||
width: 100%;
|
||||
margin-right: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 64px 32px 200px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
::v-deep .scorePane {
|
||||
width: calc(100% - 40px);
|
||||
padding: 0 32px;
|
||||
height: 124px;
|
||||
background: #E9F2FF;
|
||||
border-radius: 16px;
|
||||
font-size: 30px;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
margin-top: 48px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.fill {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
em {
|
||||
font-size: 48px;
|
||||
font-weight: bold;
|
||||
color: #2C72FE;
|
||||
font-style: normal;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
BIN
src/project/saas/AppAskForm/components/img/user-icon.png
Normal file
BIN
src/project/saas/AppAskForm/components/img/user-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
780
src/project/saas/AppBackUserList/Add.vue
Normal file
780
src/project/saas/AppBackUserList/Add.vue
Normal file
@@ -0,0 +1,780 @@
|
||||
<template>
|
||||
<div class="album">
|
||||
<div class="tips">
|
||||
请确保以下信息全部由本人填写，本人对所填写内容的真实性和完整性负责
|
||||
</div>
|
||||
<div class="form-item__group">
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="form-item__title">
|
||||
<i>*</i>
|
||||
<h2>返乡人员姓名</h2>
|
||||
</div>
|
||||
<div class="form-item__right">
|
||||
<input placeholder="请输入" v-model="form.name" :maxlength="20"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="form-item__title">
|
||||
<i>*</i>
|
||||
<h2>身份证号</h2>
|
||||
</div>
|
||||
<div class="form-item__right">
|
||||
<input
|
||||
placeholder="请输入"
|
||||
type="idcard"
|
||||
v-model="form.idNumber"
|
||||
:maxlength="20"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="form-item__title">
|
||||
<i>*</i>
|
||||
<h2>手机号码</h2>
|
||||
</div>
|
||||
<div class="form-item__right">
|
||||
<input
|
||||
placeholder="请输入"
|
||||
type="number"
|
||||
v-model="form.phone"
|
||||
:maxlength="11"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="form-item__title">
|
||||
<i>*</i>
|
||||
<h2>人员类别</h2>
|
||||
</div>
|
||||
<div class="form-item__right">
|
||||
<AiSelect
|
||||
v-model="form.type"
|
||||
dict="epidemicRecentPersonType"
|
||||
class="select"
|
||||
></AiSelect>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item__group">
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="form-item__title">
|
||||
<i>*</i>
|
||||
<h2>出行方式</h2>
|
||||
</div>
|
||||
<div class="form-item__right">
|
||||
<AiSelect
|
||||
dict="epidemicRecentTravel"
|
||||
v-model="form.travelType"
|
||||
class="select"
|
||||
></AiSelect>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="form-item__title">
|
||||
<i>*</i>
|
||||
<h2>出发时间</h2>
|
||||
</div>
|
||||
<div class="form-item__right">
|
||||
<div class="ai-area" @click="isShowStartTime = true">
|
||||
<div class="ai-area__wrapper">
|
||||
<span class="label" v-if="form.startTime">{{
|
||||
form.startTime
|
||||
}}</span>
|
||||
<i v-else>请选择</i>
|
||||
<u-icon name="arrow-right" color="#ddd"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="form-item__title">
|
||||
<i>*</i>
|
||||
<h2>出发地区</h2>
|
||||
</div>
|
||||
<div class="form-item__right">
|
||||
<AiAreaPicker
|
||||
ref="area"
|
||||
class="ai-area"
|
||||
v-model="form.startAreaId"
|
||||
:fullName.sync="form.startAreaName"
|
||||
all>
|
||||
<div class="ai-area__wrapper">
|
||||
<span class="label" v-if="form.startAreaName">{{
|
||||
form.startAreaName
|
||||
}}</span>
|
||||
<i v-else>请选择</i>
|
||||
<u-icon name="arrow-right" color="#ddd"/>
|
||||
</div>
|
||||
</AiAreaPicker>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item form-item__textarea">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="form-item__title">
|
||||
<i>*</i>
|
||||
<h2>出发地址</h2>
|
||||
</div>
|
||||
<div class="form-item__right">
|
||||
<textarea
|
||||
auto-height
|
||||
v-model="form.startAddress"
|
||||
:maxlength="500"
|
||||
placeholder="请输入详细的出发地址"
|
||||
placeholder-style="font-size: 16px"
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="form-item__title">
|
||||
<i>*</i>
|
||||
<h2>到达时间</h2>
|
||||
</div>
|
||||
<div class="form-item__right">
|
||||
<div class="ai-area" @click="isShowEndTime = true">
|
||||
<div class="ai-area__wrapper">
|
||||
<span class="label" v-if="form.arriveTime">{{
|
||||
form.arriveTime
|
||||
}}</span>
|
||||
<i v-else>请选择</i>
|
||||
<u-icon name="arrow-right" color="#ddd"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="form-item__title">
|
||||
<i>*</i>
|
||||
<h2>到达地区</h2>
|
||||
</div>
|
||||
<div class="form-item__right">
|
||||
<AiAreaPicker
|
||||
ref="area"
|
||||
class="ai-area"
|
||||
:value="form.arriveAreaId"
|
||||
:fullName.sync="form.arriveAreaName"
|
||||
mode="custom"
|
||||
@select="(v) => (form.arriveAreaId = v)"
|
||||
all
|
||||
>
|
||||
<div class="ai-area__wrapper">
|
||||
<span class="label" v-if="form.arriveAreaName">{{
|
||||
form.arriveAreaName
|
||||
}}</span>
|
||||
<i v-else>请选择</i>
|
||||
<u-icon name="arrow-right" color="#ddd"/>
|
||||
</div>
|
||||
</AiAreaPicker>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item form-item__textarea">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="form-item__title">
|
||||
<i>*</i>
|
||||
<h2>返乡地址</h2>
|
||||
</div>
|
||||
<div class="form-item__right">
|
||||
<textarea
|
||||
auto-height
|
||||
v-model="form.arriveAddress"
|
||||
:maxlength="500"
|
||||
placeholder="请输入详细的返乡地址"
|
||||
placeholder-style="font-size: 16px"
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item form-item__textarea">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="form-item__title">
|
||||
<i>*</i>
|
||||
<h2>行程描述</h2>
|
||||
</div>
|
||||
<div class="form-item__right">
|
||||
<textarea
|
||||
auto-height
|
||||
style="height: 90px"
|
||||
v-model="form.description"
|
||||
:maxlength="500"
|
||||
placeholder="请输入行程描述"
|
||||
placeholder-style="font-size: 16px"
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item__group">
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="form-item__title">
|
||||
<i>*</i>
|
||||
<h2>核酸检测日期</h2>
|
||||
</div>
|
||||
<div class="form-item__right">
|
||||
<div class="ai-area" @click="isShowDate = true">
|
||||
<div class="ai-area__wrapper">
|
||||
<span class="label" v-if="form.checkTime">{{
|
||||
form.checkTime
|
||||
}}</span>
|
||||
<i v-else>请选择</i>
|
||||
<u-icon name="arrow-right" color="#ddd"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item form-item__imgs">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="form-item__title">
|
||||
<i>*</i>
|
||||
<h2>本人健康码截图或核酸检测报告</h2>
|
||||
</div>
|
||||
<div class="form-item__right">
|
||||
<AiUploader :def.sync="form.checkPhoto" :limit="1" action="/admin/file/add2"></AiUploader>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item form-item__imgs">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="form-item__title">
|
||||
<i>*</i>
|
||||
<h2>核酸检测结果</h2>
|
||||
</div>
|
||||
<div class="form-item__right">
|
||||
<AiRadio
|
||||
style="width: 100%"
|
||||
v-model="form.checkResult"
|
||||
dict="epidemicRecentTestResult"
|
||||
></AiRadio>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item__group">
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="form-item__title">
|
||||
<i>*</i>
|
||||
<h2>当前体温</h2>
|
||||
</div>
|
||||
<div class="form-item__right">
|
||||
<input
|
||||
placeholder="请输入"
|
||||
v-model="form.temperature"
|
||||
:maxlength="20"
|
||||
/>
|
||||
<i>℃</i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item form-item__imgs">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="form-item__title">
|
||||
<i>*</i>
|
||||
<h2>14天内是否接触新冠确诊或疑似患者</h2>
|
||||
</div>
|
||||
<div class="form-item__right">
|
||||
<AiRadio
|
||||
style="width: 100%"
|
||||
v-model="form.touchInFourteen"
|
||||
dict="epidemicTouchInFourteen"
|
||||
></AiRadio>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item form-item__imgs">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="form-item__title">
|
||||
<i>*</i>
|
||||
<h2>当前健康状况（可多选）</h2>
|
||||
</div>
|
||||
<div class="form-item__right">
|
||||
<AiCheckbox
|
||||
style="width: 100%"
|
||||
v-model="form.health"
|
||||
dict="epidemicRecentHealth"
|
||||
></AiCheckbox>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<u-picker
|
||||
mode="time"
|
||||
:params="dataParams"
|
||||
v-model="isShowDate"
|
||||
@confirm="onDateChange"
|
||||
></u-picker>
|
||||
<u-picker
|
||||
mode="time"
|
||||
:params="params"
|
||||
v-model="isShowStartTime"
|
||||
@confirm="onStartChange"
|
||||
></u-picker>
|
||||
<u-picker
|
||||
mode="time"
|
||||
:params="params"
|
||||
v-model="isShowEndTime"
|
||||
@confirm="onEndChange"
|
||||
></u-picker>
|
||||
<div class="btn-wrapper">
|
||||
<div class="btn" hover-class="text-hover" @click="submit">提交</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState} from "vuex";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isShowType: false,
|
||||
isShowEndTime: false,
|
||||
isShowStartTime: false,
|
||||
isShowDate: false,
|
||||
params: {
|
||||
year: true,
|
||||
month: true,
|
||||
day: true,
|
||||
hour: true,
|
||||
minute: true,
|
||||
},
|
||||
dataParams: {
|
||||
year: true,
|
||||
month: true,
|
||||
day: true,
|
||||
},
|
||||
form: {
|
||||
arriveAddress: "",
|
||||
arriveAreaId: "",
|
||||
arriveAreaName: "",
|
||||
arriveTime: "",
|
||||
checkPhoto: [],
|
||||
checkResult: "",
|
||||
checkTime: "",
|
||||
description: "",
|
||||
health: [],
|
||||
idNumber: "",
|
||||
name: "",
|
||||
phone: "",
|
||||
startAddress: "",
|
||||
startAreaId: "",
|
||||
startAreaName: "",
|
||||
startTime: "",
|
||||
temperature: "",
|
||||
touchInFourteen: "",
|
||||
travelType: "",
|
||||
type: "",
|
||||
unusual: "",
|
||||
arriveGirdId: '',
|
||||
arriveGirdName: '',
|
||||
corpId: '',
|
||||
},
|
||||
dictList: [],
|
||||
arr: [],
|
||||
gridList: [[], [], []],
|
||||
flag: false,
|
||||
areaId: "",
|
||||
};
|
||||
},
|
||||
|
||||
|
||||
computed: {
|
||||
...mapState(["user"]),
|
||||
},
|
||||
|
||||
onLoad(option) {
|
||||
this.areaId = this.user.areaId;
|
||||
document.title = '返乡登记'
|
||||
if (option.corpId) {
|
||||
this.form.corpId = option.corpId
|
||||
}
|
||||
this.form.arriveGirdId = option.arriveGirdId
|
||||
this.form.arriveGirdName = decodeURIComponent(option.arriveGirdName)
|
||||
},
|
||||
|
||||
methods: {
|
||||
onDateChange(e) {
|
||||
this.form.checkTime = `${e.year}-${e.month}-${e.day}`;
|
||||
},
|
||||
|
||||
onStartChange(e) {
|
||||
this.form.startTime = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}`;
|
||||
},
|
||||
|
||||
onEndChange(e) {
|
||||
this.form.arriveTime = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}`;
|
||||
},
|
||||
|
||||
submit() {
|
||||
if (!this.form.name) {
|
||||
return this.$u.toast("请输入返乡人员姓名");
|
||||
}
|
||||
|
||||
if (!this.form.idNumber) {
|
||||
return this.$u.toast("请输入返乡人员身份证号");
|
||||
}
|
||||
|
||||
if (
|
||||
!/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(this.form.idNumber)
|
||||
) {
|
||||
return this.$u.toast("请输入正确的身份证账号");
|
||||
}
|
||||
|
||||
if (!this.form.phone) {
|
||||
return this.$u.toast("请输入返乡人员手机号码");
|
||||
}
|
||||
|
||||
if (!/^1[0-9]{10,10}$/.test(this.form.phone)) {
|
||||
return this.$u.toast("请输入正确的手机号码");
|
||||
}
|
||||
|
||||
if (!this.form.type) {
|
||||
return this.$u.toast("请选择人员类别");
|
||||
}
|
||||
|
||||
if (!this.form.travelType) {
|
||||
return this.$u.toast("请选择出行方式");
|
||||
}
|
||||
|
||||
if (!this.form.startTime) {
|
||||
return this.$u.toast("请选择出发时间");
|
||||
}
|
||||
|
||||
if (
|
||||
new Date(this.form.startTime.replace(/-/g, "/")).getTime() >
|
||||
new Date().getTime()
|
||||
) {
|
||||
return this.$u.toast("出发时间不得晚于当前时间");
|
||||
}
|
||||
|
||||
if (!this.form.startAreaName) {
|
||||
return this.$u.toast("请选择出发地区");
|
||||
}
|
||||
|
||||
if (
|
||||
this.form.startAreaId.substr(this.form.startAreaId.length - 3, 3) ===
|
||||
"000"
|
||||
) {
|
||||
return this.$u.toast("出发地区必须选到村或社区");
|
||||
}
|
||||
if (!this.form.startAddress) {
|
||||
return this.$u.toast("请输入出发详细地址");
|
||||
}
|
||||
|
||||
if (!this.form.arriveTime) {
|
||||
return this.$u.toast("请选择到达时间");
|
||||
}
|
||||
|
||||
if (
|
||||
new Date(this.form.startTime.replace(/-/g, "/")).getTime() >=
|
||||
new Date(this.form.arriveTime.replace(/-/g, "/")).getTime()
|
||||
) {
|
||||
return this.$u.toast("到达时间不得早于出发时间");
|
||||
}
|
||||
|
||||
if (!this.form.arriveAreaName) {
|
||||
return this.$u.toast("请选择到达地区");
|
||||
}
|
||||
if (
|
||||
this.form.arriveAreaId.substr(this.form.arriveAreaId.length - 3, 3) ===
|
||||
"000"
|
||||
) {
|
||||
return this.$u.toast("到达地区必须选到村或社区");
|
||||
}
|
||||
if (!this.form.arriveAddress) {
|
||||
return this.$u.toast("请输入返乡地址");
|
||||
}
|
||||
|
||||
if (!this.form.description) {
|
||||
return this.$u.toast("请输入行程描述");
|
||||
}
|
||||
if (!this.form.checkTime) {
|
||||
return this.$u.toast("请选择核酸检测日期");
|
||||
}
|
||||
if (!this.form.checkPhoto.length) {
|
||||
return this.$u.toast("请上传本人健康码截图或核酸检测报告");
|
||||
}
|
||||
|
||||
if (!this.form.checkResult) {
|
||||
return this.$u.toast("请选择核酸检测结果");
|
||||
}
|
||||
if (!this.form.temperature) {
|
||||
return this.$u.toast("请输入当前体温");
|
||||
}
|
||||
if (!this.form.touchInFourteen) {
|
||||
return this.$u.toast("请选择14天内是否接触新冠确诊或疑似患者");
|
||||
}
|
||||
|
||||
if (!this.form.health.length) {
|
||||
return this.$u.toast("请选择当前健康状况");
|
||||
}
|
||||
if (this.flag) return;
|
||||
this.flag = true;
|
||||
|
||||
this.$loading();
|
||||
this.$http
|
||||
.post(`/app/appepidemicbackhomerecord/addOrUpdate`, {
|
||||
...this.form,
|
||||
startTime: this.form.startTime + ":00",
|
||||
arriveTime: this.form.arriveTime + ":00",
|
||||
checkTime: this.form.checkTime + " 00:00:00",
|
||||
health: this.form.health.join(","),
|
||||
checkPhoto: JSON.stringify(this.form.checkPhoto),
|
||||
})
|
||||
.then((res) => {
|
||||
this.$hideLoading();
|
||||
this.flag = false;
|
||||
if (res.code == 0) {
|
||||
uni.$emit("updateBackList");
|
||||
setTimeout(() => {
|
||||
uni.navigateTo({url: `./Success?status=1&corpId=${this.form.corpId}`})
|
||||
}, 400);
|
||||
}
|
||||
}).catch((err) => {
|
||||
console.log(err)
|
||||
uni.$emit("updateBackList");
|
||||
uni.navigateTo({url: `./Success?status=1&corpId=${this.form.corpId}`})
|
||||
})
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.album {
|
||||
padding-bottom: 140px;
|
||||
|
||||
.tips {
|
||||
line-height: 1.3;
|
||||
padding: 32px 32px;
|
||||
color: #ff883c;
|
||||
font-size: 30px;
|
||||
text-align: justify;
|
||||
background: #fff8f3;
|
||||
}
|
||||
|
||||
.form-item__group {
|
||||
margin-bottom: 24px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
padding-left: 32px;
|
||||
|
||||
.form-item__checkbox {
|
||||
width: 100%;
|
||||
|
||||
div {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
margin-bottom: 24px;
|
||||
text-align: center;
|
||||
background: #ffffff;
|
||||
border-radius: 16px;
|
||||
color: #333333;
|
||||
font-size: 28px;
|
||||
border: 1px solid #cccccc;
|
||||
|
||||
&.active {
|
||||
background: #4181ff;
|
||||
color: #fff;
|
||||
border-color: #4181ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-item__radio {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
div {
|
||||
width: 212px;
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
margin-right: 16px;
|
||||
margin-bottom: 8px;
|
||||
text-align: center;
|
||||
background: #ffffff;
|
||||
border-radius: 16px;
|
||||
color: #333333;
|
||||
font-size: 28px;
|
||||
border: 1px solid #cccccc;
|
||||
|
||||
&:nth-of-type(3n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: #4181ff;
|
||||
color: #fff;
|
||||
border-color: #4181ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ai-area__wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 100px;
|
||||
|
||||
span {
|
||||
color: #333;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
i {
|
||||
color: #999;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 16px;
|
||||
height: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.form-item__wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 128px;
|
||||
padding-right: 28px;
|
||||
border-bottom: 1px solid #dddddd;
|
||||
|
||||
input {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
text-align: right;
|
||||
color: #333;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.form-item__right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 32px;
|
||||
|
||||
.select {
|
||||
._i {
|
||||
padding-left: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
max-width: 400px;
|
||||
margin-right: 8px;
|
||||
color: #333333;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
i {
|
||||
margin-right: 8px;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.form-item__wrapper {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.form-item__title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
i {
|
||||
font-size: 32px;
|
||||
color: #ff4466;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 28px;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
h2 {
|
||||
padding: 0 4px;
|
||||
font-weight: 600;
|
||||
font-size: 32px;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
&.form-item__imgs,
|
||||
&.form-item__textarea {
|
||||
.form-item__wrapper {
|
||||
display: block;
|
||||
height: auto;
|
||||
padding-bottom: 32px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
height: 90px;
|
||||
}
|
||||
|
||||
.form-item__title {
|
||||
padding: 32px 0;
|
||||
}
|
||||
|
||||
.form-item__right {
|
||||
padding-left: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-wrapper {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
z-index: 11;
|
||||
width: 100%;
|
||||
padding: 20px 0 20px 0 !important;
|
||||
transform: translateX(-50%);
|
||||
background: #f3f6f9;
|
||||
}
|
||||
|
||||
.btn-wrapper .btn {
|
||||
width: 686px;
|
||||
height: 88px;
|
||||
line-height: 88px;
|
||||
margin: 0 auto;
|
||||
padding: 0 !important;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 34px;
|
||||
background: #4181FF;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.btn-wrapper .disabled {
|
||||
color: #B9E7D0;
|
||||
background: #50C48A;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
488
src/project/saas/AppBackUserList/AppBackUserList.vue
Normal file
488
src/project/saas/AppBackUserList/AppBackUserList.vue
Normal file
@@ -0,0 +1,488 @@
|
||||
<template>
|
||||
<div class="BackUserList">
|
||||
<AiTopFixed v-if="isGridMember">
|
||||
<div class="pad-t32"></div>
|
||||
<div class="select-gird">
|
||||
<AiPagePicker type="custom" @select="confirmSelect" self :ops="{url:'../AppGridManagement/SelectGird',label: 'girdName'}">
|
||||
<div flex class="center">
|
||||
<img src="./components/img/gird-icon.png" alt="" class="gird-icon">
|
||||
<AiMore v-model="girdName" icon="arrow-down"/>
|
||||
</div>
|
||||
</AiPagePicker>
|
||||
</div>
|
||||
<div class="header">
|
||||
<div class="tab-item">
|
||||
<h2 style="color:#2C51CE;">{{ totalInfo.total }}</h2>
|
||||
<p>返乡人员</p>
|
||||
</div>
|
||||
<div class="tab-item">
|
||||
<h2 style="color:#5AAD6A;">{{ totalInfo.today }}</h2>
|
||||
<p>今日返乡</p>
|
||||
</div>
|
||||
<div class="tab-item">
|
||||
<h2 style="color:#F5A319;">{{ totalInfo.todayUnusual }}</h2>
|
||||
<p>今日异常</p>
|
||||
</div>
|
||||
<div class="tab-item">
|
||||
<h2 style="color:#CD413A;border-right:0;">{{ totalInfo.release }}</h2>
|
||||
<p>异常处理</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-select">
|
||||
<div class="item" :class="!tabIndex ? 'active' : ''" @click="tabClick(0)">返乡人员<span></span></div>
|
||||
<div class="item" :class="tabIndex ? 'active' : ''" @click="tabClick(1)">异常人员<span></span></div>
|
||||
</div>
|
||||
</AiTopFixed>
|
||||
<div class="user-list" v-if="isGridMember">
|
||||
<div class="item" @click="toUser(item)" v-for="(item,index) in list" :key="index">
|
||||
<h2 class="name">{{ item.name }}<span class="status" v-if="item.status == 0">有异常</span></h2>
|
||||
<p class="color-999">{{ item.idNumber }}</p>
|
||||
<p><img src="./components/img/org-icon.png" alt=""><span class="start-name">{{ item.startAreaName }}</span></p>
|
||||
<p><img src="./components/img/blue-icon.png" alt=""><span class="start-name">{{ item.arriveAreaName }}</span>
|
||||
</p>
|
||||
<p><img src="./components/img/time-icon.png" alt="">{{ item.arriveTime }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<AiEmpty v-if="!list.length && isGridMember"></AiEmpty>
|
||||
<div v-if="!isGridMember" class="empty">
|
||||
<img src="./components/img/no-admin.png" alt="">
|
||||
<p>没有网格员权限<br/>无法查看返乡登记哦~</p>
|
||||
</div>
|
||||
<div class="pad-b120"></div>
|
||||
<div class="footer" v-if="isGridMember">
|
||||
<div class="bg-fff"
|
||||
@click="linkTo(`./Add?arriveGirdId=${girdId}&arriveGirdName=${encodeURIComponent(girdName)}`)">登记
|
||||
</div>
|
||||
<div class="bg-blue" @click="show=true">邀请居民填写</div>
|
||||
</div>
|
||||
<u-popup v-model="show" mode="bottom" border-radius="14">
|
||||
<div class="line-bg"></div>
|
||||
<div class="flex">
|
||||
<div class="item" @click="share">
|
||||
<img src="./components/img/zf.png" alt="">
|
||||
<p>转发</p>
|
||||
</div>
|
||||
<div class="item" @click="shareWechat">
|
||||
<img src="./components/img/wx.png" alt="">
|
||||
<p>分享到微信</p>
|
||||
</div>
|
||||
<div class="item" @click="copy">
|
||||
<img src="./components/img/lj.png" alt="">
|
||||
<p>获取链接</p>
|
||||
</div>
|
||||
<div class="item" @click="linkTo(`./Qrcode?girdId=${girdId}&girdName=${girdName}`)">
|
||||
<img src="./components/img/ewm.png" alt="">
|
||||
<p>保存二维码</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn" @click="show=false">取消</div>
|
||||
</u-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapActions, mapState} from 'vuex'
|
||||
import qs from "query-string"
|
||||
|
||||
export default {
|
||||
appName: '返乡登记',
|
||||
data() {
|
||||
return {
|
||||
tabIndex: 0,
|
||||
current: 1,
|
||||
list: [],
|
||||
name: '',
|
||||
totalInfo: {},
|
||||
show: false,
|
||||
girdName: '',
|
||||
girdId: '',
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
params() {
|
||||
return qs.parse(decodeURIComponent(location.search))
|
||||
},
|
||||
shareLink() {
|
||||
let {girdId, girdName, user: {corpId}} = this
|
||||
return location.origin + `/apps/AppBackUserList/add?corpId=${corpId}&arriveGirdId=${girdId}&arriveGirdName=${encodeURIComponent(girdName)}`
|
||||
},
|
||||
isGridMember() {
|
||||
return this.user.girdCheckType > 0
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.girdId = this.user.girdId
|
||||
this.confirmSelect(this.user)
|
||||
uni.$on('updateBackList', () => {
|
||||
this.getListInit()
|
||||
this.getTotal()
|
||||
})
|
||||
},
|
||||
onShow() {
|
||||
document.title = '返乡登记'
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['injectJWeixin', 'wxInvoke']),
|
||||
confirmSelect(v) {
|
||||
this.girdId = v?.id
|
||||
this.girdName = v?.girdName
|
||||
this.getListInit()
|
||||
this.getTotal()
|
||||
},
|
||||
tabClick(index) {
|
||||
this.tabIndex = index
|
||||
this.getListInit()
|
||||
},
|
||||
getListInit() {
|
||||
this.current = 1
|
||||
this.list = []
|
||||
this.getList()
|
||||
},
|
||||
getList() {
|
||||
var status = ''
|
||||
if (this.tabIndex == 1) {
|
||||
status = 0
|
||||
}
|
||||
this.$http.post(`/app/appepidemicbackhomerecord/list?current=${this.current}&size=10&status=${status}&name=${this.name}&arriveGirdId=${this.girdId}`)
|
||||
.then((res) => {
|
||||
if (res?.data) {
|
||||
res.data.records.map((item) => {
|
||||
item.idNumber = this.$idCardNoUtil.hideId(item.idNumber)
|
||||
})
|
||||
this.list = this.current > 1 ? [...this.list, ...res.data.records] : res.data.records
|
||||
}
|
||||
})
|
||||
},
|
||||
getTotal() {
|
||||
this.$http.post(`/app/appepidemicbackhomerecord/statistic?arriveGirdId=${this.girdId}`).then((res) => {
|
||||
if (res?.data) {
|
||||
this.totalInfo = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
toUser(row) {
|
||||
uni.navigateTo({url: `./UserInfo?id=${row.id}`})
|
||||
},
|
||||
linkTo(url) {
|
||||
uni.navigateTo({url})
|
||||
},
|
||||
close() {
|
||||
this.show = false
|
||||
},
|
||||
open() {
|
||||
this.show = true
|
||||
},
|
||||
copy() {
|
||||
let oInput = document.createElement('input')
|
||||
oInput.value = this.shareLink
|
||||
document.body.appendChild(oInput)
|
||||
oInput.select()
|
||||
document.execCommand('Copy')
|
||||
this.$u.toast('已复制')
|
||||
oInput.remove()
|
||||
},
|
||||
share() {
|
||||
this.injectJWeixin(['shareAppMessage', 'shareWechatMessage']).then(() => {
|
||||
this.wxInvoke(['shareAppMessage', {
|
||||
// title: this.params.title,
|
||||
// desc: this.params.tableExplain,
|
||||
imgUrl: 'https://cdn.cunwuyun.cn/dvcp/h5/back-user-share.png',
|
||||
link: this.shareLink,
|
||||
}])
|
||||
})
|
||||
},
|
||||
shareWechat() {
|
||||
this.injectJWeixin(['shareAppMessage', 'shareWechatMessage']).then(() => {
|
||||
this.wxInvoke(['shareWechatMessage', {
|
||||
// title: this.params.title,
|
||||
// desc: this.params.tableExplain,
|
||||
imgUrl: 'https://cdn.cunwuyun.cn/dvcp/h5/back-user-share.png',
|
||||
link: this.shareLink,
|
||||
}])
|
||||
})
|
||||
},
|
||||
},
|
||||
onReachBottom() {
|
||||
this.current++
|
||||
this.getList()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.BackUserList {
|
||||
.header {
|
||||
padding: 54px 32px 48px 32px;
|
||||
display: flex;
|
||||
background-color: #fff;
|
||||
margin-bottom: 4px;
|
||||
|
||||
.tab-item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
|
||||
h2 {
|
||||
font-size: 52px;
|
||||
font-family: DINAlternate-Bold, DINAlternate;
|
||||
font-weight: bold;
|
||||
height: 80px;
|
||||
margin-bottom: 8px;
|
||||
letter-spacing: -4px;
|
||||
border-right: 1px solid #ddd;
|
||||
line-height: 44px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 28px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #999;
|
||||
line-height: 40px;
|
||||
margin-top: -22px;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-item:nth-last-of-type(1) {
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.search {
|
||||
width: 100%;
|
||||
height: 112px;
|
||||
padding: 32px;
|
||||
box-sizing: border-box;
|
||||
background: #FFF;
|
||||
display: flex;
|
||||
margin-bottom: 8px;
|
||||
|
||||
.left {
|
||||
width: calc(100% - 402px);
|
||||
}
|
||||
}
|
||||
|
||||
.tab-select {
|
||||
width: 100%;
|
||||
height: 96px;
|
||||
background: #FFF;
|
||||
display: flex;
|
||||
margin-bottom: 4px;
|
||||
|
||||
.item {
|
||||
flex: 1;
|
||||
font-size: 32px;
|
||||
line-height: 96px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.active {
|
||||
color: #135AB8;
|
||||
position: relative;
|
||||
|
||||
span {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
width: 192px;
|
||||
margin-left: -96px;
|
||||
border-bottom: 4px solid #135AB8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-list {
|
||||
background-color: #f5f5f5;
|
||||
|
||||
.item {
|
||||
padding: 32px 64px 24px;
|
||||
background-color: #fff;
|
||||
margin-bottom: 8px;
|
||||
|
||||
.name {
|
||||
font-size: 36px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
line-height: 50px;
|
||||
margin-bottom: 8px;
|
||||
|
||||
.status {
|
||||
float: right;
|
||||
font-size: 28px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #FF4466;
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 28px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #333;
|
||||
line-height: 40px;
|
||||
margin-bottom: 8px;
|
||||
|
||||
img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-right: 18px;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
.start-name {
|
||||
display: inline-block;
|
||||
width: calc(100% - 50px);
|
||||
}
|
||||
|
||||
.color-999 {
|
||||
margin-bottom: 24px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .AiTopFixed {
|
||||
.placeholder {
|
||||
.content {
|
||||
padding: 0 !important;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.fixed {
|
||||
margin: 0 !important;
|
||||
background-color: #f5f5f5 !important;
|
||||
|
||||
.content {
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pad-t32 {
|
||||
padding-top: 32px;
|
||||
}
|
||||
|
||||
.select-gird {
|
||||
width: calc(100% - 60px);
|
||||
padding: 24px 32px;
|
||||
background: #FFFFFF;
|
||||
border-radius: 16px;
|
||||
margin: 0 30px 32px;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
|
||||
img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
vertical-align: middle;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.empty {
|
||||
text-align: center;
|
||||
|
||||
img {
|
||||
width: 282px;
|
||||
height: 306px;
|
||||
margin: 136px auto 0;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 28px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #999;
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.pad-b120 {
|
||||
padding-bottom: 120px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 112px;
|
||||
line-height: 110px;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
font-size: 36px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
z-index: 99;
|
||||
|
||||
.bg-fff {
|
||||
flex: 1;
|
||||
color: #333;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.bg-blue {
|
||||
flex: 2;
|
||||
color: #fff;
|
||||
background-color: #3975C6;
|
||||
}
|
||||
}
|
||||
|
||||
.line-bg {
|
||||
width: 110px;
|
||||
height: 8px;
|
||||
background: #DCDDDE;
|
||||
border-radius: 4px;
|
||||
margin: 32px auto 82px;
|
||||
}
|
||||
|
||||
.flex {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
padding-bottom: 70px;
|
||||
|
||||
.item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
|
||||
img {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 16px;
|
||||
background-color: #fff;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 26px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #666;
|
||||
line-height: 36px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
height: 96px;
|
||||
line-height: 96px;
|
||||
text-align: center;
|
||||
background: #FFF;
|
||||
font-size: 30px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
::v-deep .uni-scroll-view {
|
||||
background-color: #f7f7f7;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
272
src/project/saas/AppBackUserList/ErrorInfo.vue
Normal file
272
src/project/saas/AppBackUserList/ErrorInfo.vue
Normal file
@@ -0,0 +1,272 @@
|
||||
<template>
|
||||
<div class="ErrorInfo">
|
||||
<div class="header">
|
||||
<div class="name">{{info.name}}<span @click="callPhone(info.phone)">{{info.phone}}</span><img :src="$cdn + 'common/phone.png'" alt="" @click="callPhone(info.phone)" class="phone-icon" /></div>
|
||||
<p>身份证号：</p>
|
||||
<p class="mar-b8" style="color: #333">{{info.idNumber}}</p>
|
||||
<p>异常情况：</p>
|
||||
<p style="color: #ff4466">
|
||||
<span>{{info.unusual}}</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="info" v-if="list.length">
|
||||
<div class="title">异常情况记录</div>
|
||||
<div class="error-list">
|
||||
<div class="item" v-for="(item, index) in list" :key="index">
|
||||
<p>{{item.content}}</p>
|
||||
<div>{{item.createTime}}
|
||||
<span>网格员：<AiOpenData v-if="item.createUserName" type="userName" :openid="item.createUserName" style="display:inline-block;" />11</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-line"></div>
|
||||
<div class="footer">
|
||||
<div class="add" @click="show = true">新增记录</div>
|
||||
<div class="confirm" @click="cancel()">解除异常</div>
|
||||
</div>
|
||||
<u-popup v-model="show" mode="bottom">
|
||||
<div class="textarea">
|
||||
<u-input v-model="value" type="textarea" :height="120" :auto-height="true" placeholder="异常情况记录" :clearable="false" maxlength="1000" />
|
||||
<p>字数{{value.length}}/1000</p>
|
||||
</div>
|
||||
<div class="btn">
|
||||
<span @click="value=''">清空内容</span>
|
||||
<span class="confirm" @click="confirm">保存</span>
|
||||
</div>
|
||||
</u-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
export default {
|
||||
components: {},
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
value: '',
|
||||
id: '',
|
||||
list: [],
|
||||
info: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
},
|
||||
onShow() {
|
||||
document.title = '异常情况处理'
|
||||
},
|
||||
onLoad(option) {
|
||||
this.id = option.id
|
||||
this.$dict.load('epidemicRecentHealth').then(() => {
|
||||
this.getDetail()
|
||||
})
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
this.$http.post(`/app/appepidemicunusuallog/list?recordId=${this.id}`).then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.list = res.data.records
|
||||
}
|
||||
})
|
||||
},
|
||||
getDetail() {
|
||||
this.$http.post(`/app/appepidemicbackhomerecord/queryDetailById?id=${this.id}`).then((res) => {
|
||||
if (res.code == 0) {
|
||||
res.data.idNumber = res.data.idNumber.replace(/(.{6}).*(.{4})/,"$1********$2")
|
||||
this.info = res.data
|
||||
this.info.health = this.info.health.split(',')
|
||||
}
|
||||
})
|
||||
},
|
||||
cancel() {
|
||||
this.$confirm(`是否解除该条异常信息？`).then(() => {
|
||||
this.$http.post("/app/appepidemicbackhomerecord/release", {id: this.id}).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.$u.toast("解除成功!")
|
||||
uni.$emit('updateDetail')
|
||||
uni.$emit('updateList')
|
||||
setTimeout(() => {
|
||||
uni.navigateBack()
|
||||
}, 600);
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
confirm() {
|
||||
if(!this.value) {
|
||||
return this.$u.toast('请输入异常情况')
|
||||
}
|
||||
|
||||
var params = {
|
||||
"content": this.value,
|
||||
"createUserId": this.user.id,
|
||||
"createUserName": this.user.name,
|
||||
"recordId": this.id
|
||||
}
|
||||
this.$http.post("/app/appepidemicunusuallog/addOrUpdate", params).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.$u.toast("新增成功!")
|
||||
this.show = false
|
||||
this.value = ''
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
},
|
||||
callPhone(phone) {
|
||||
uni.makePhoneCall({phoneNumber: phone})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.ErrorInfo {
|
||||
height: 100%;
|
||||
.header {
|
||||
padding: 32px 48px;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
margin-bottom: 24px;
|
||||
.name {
|
||||
font-size: 36px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
line-height: 50px;
|
||||
margin-bottom: 16px;
|
||||
span {
|
||||
font-size: 32px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #4181ff;
|
||||
line-height: 44px;
|
||||
margin: 0 20px 0 32px;
|
||||
}
|
||||
img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
p {
|
||||
font-size: 30px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #999;
|
||||
line-height: 42px;
|
||||
color: #999;
|
||||
}
|
||||
.mar-b8 {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
.info {
|
||||
padding: 0 32px 32px;
|
||||
background-color: #fff;
|
||||
.title {
|
||||
font-size: 38px;
|
||||
font-family: PingFangSC-Semibold, PingFang SC;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
line-height: 116px;
|
||||
}
|
||||
.error-list {
|
||||
.item {
|
||||
width: 100%;
|
||||
background: #f4f7fe;
|
||||
border-radius: 8px;
|
||||
padding: 24px 24px 18px 24px;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 16px;
|
||||
p {
|
||||
font-size: 28px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #343d65;
|
||||
line-height: 40px;
|
||||
word-break: break-all;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
div {
|
||||
font-size: 24px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #666;
|
||||
line-height: 34px;
|
||||
span {
|
||||
display: inline-block;
|
||||
margin-left: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 112px;
|
||||
line-height: 112px;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
font-size: 36px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
.add {
|
||||
flex: 1;
|
||||
color: #333;
|
||||
}
|
||||
.confirm {
|
||||
flex: 2;
|
||||
color: #fff;
|
||||
background: #1365dd;
|
||||
}
|
||||
div {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.bg-line {
|
||||
width: 100%;
|
||||
height: 130px;
|
||||
}
|
||||
.textarea {
|
||||
margin: 32px 32px 24px;
|
||||
width: calc(100% - 64px);
|
||||
padding: 16px;
|
||||
box-sizing: border-box;
|
||||
background: #f7f7f7;
|
||||
border-radius: 8px;
|
||||
p {
|
||||
font-size: 26px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #999;
|
||||
line-height: 36px;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
padding: 0 32px 24px;
|
||||
height: 64px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
span {
|
||||
display: inline-block;
|
||||
line-height: 64px;
|
||||
font-size: 26px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #666;
|
||||
}
|
||||
.confirm {
|
||||
width: 144px;
|
||||
text-align: center;
|
||||
background: #1365dd;
|
||||
border-radius: 32px;
|
||||
font-size: 28px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
97
src/project/saas/AppBackUserList/Qrcode.vue
Normal file
97
src/project/saas/AppBackUserList/Qrcode.vue
Normal file
@@ -0,0 +1,97 @@
|
||||
<template>
|
||||
<div class="Qrcode">
|
||||
<div class="content">
|
||||
<img src="./components/img/qrcode-header.png" alt="" class="header-img">
|
||||
<div class="code-content">
|
||||
<div class="img-div">
|
||||
<img :src="imgUrl" alt="">
|
||||
</div>
|
||||
<p>扫二维码填写返乡人员信息</p>
|
||||
<p>网格信息:{{girdName}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
girdName: '',
|
||||
girdId: '',
|
||||
imgUrl: ''
|
||||
}
|
||||
},
|
||||
computed: { ...mapState(['user']) },
|
||||
onShow() {
|
||||
document.title = '返乡人员信息'
|
||||
},
|
||||
onLoad(option) {
|
||||
this.girdName = option.girdName
|
||||
this.girdId = option.girdId
|
||||
this.getQrcode()
|
||||
},
|
||||
methods: {
|
||||
getQrcode() {
|
||||
this.$http.post(`/app/appepidemicbackhomerecord/addQrCodeURL?arriveGirdId=${this.girdId}&arriveGirdName=${this.girdName}`).then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.imgUrl = res.data
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
uni-page-body{
|
||||
height: 100%;
|
||||
}
|
||||
.Qrcode{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #F3F6F9;
|
||||
padding: 30px 30px 134px;
|
||||
box-sizing: border-box;
|
||||
.content{
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
padding: 120px 70px 200px;
|
||||
box-sizing: border-box;
|
||||
.header-img{
|
||||
width: 100%;
|
||||
}
|
||||
.code-content{
|
||||
width: 100%;
|
||||
height: 614px;
|
||||
background: #F6F9FF;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #E6EEFF;
|
||||
margin-top: -8px;
|
||||
padding: 28px 44px 0;
|
||||
box-sizing: border-box;
|
||||
.img-div{
|
||||
width: 462px;
|
||||
height: 462px;
|
||||
background-color: #fff;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
img{
|
||||
width: 424px;
|
||||
height: 424px;
|
||||
margin: auto;
|
||||
}
|
||||
p{
|
||||
margin-top: 8px;
|
||||
font-size: 26px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #333;
|
||||
line-height: 36px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
72
src/project/saas/AppBackUserList/Success.vue
Normal file
72
src/project/saas/AppBackUserList/Success.vue
Normal file
@@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<div class="success">
|
||||
<img src="./components/img/success.png" alt="" v-if="status">
|
||||
<img src="./components/img/fail.png" alt="" v-else>
|
||||
<p>{{status ? '上报成功！' : '上报失败！'}}</p>
|
||||
<div class="footer" @click="back" v-if="!corpId">{{status ? '确定' : '我知道了'}}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
status: 1,
|
||||
corpId: ''
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
document.title = '返乡登记'
|
||||
},
|
||||
onLoad(option) {
|
||||
this.status = option.status
|
||||
if(option.corpId) {
|
||||
this.corpId = option.corpId
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
back() {
|
||||
uni.navigateBack({delta: 2})
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
uni-page-body{
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
}
|
||||
.success {
|
||||
text-align: center;
|
||||
img{
|
||||
width: 192px;
|
||||
height: 192px;
|
||||
margin: 96px 0 16px 0;
|
||||
}
|
||||
p{
|
||||
line-height: 50px;
|
||||
color: #333;
|
||||
font-size: 36px;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
margin-bottom: 72px;
|
||||
}
|
||||
.footer{
|
||||
width: calc(100% - 96px);
|
||||
height: 88px;
|
||||
line-height: 88px;
|
||||
background: #1365DD;
|
||||
box-shadow: inset 0px 1px 0px 0px #EEEEEE;
|
||||
font-size: 32px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #FFF;
|
||||
text-align: center;
|
||||
border-radius: 8px;
|
||||
margin-left: 48px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
355
src/project/saas/AppBackUserList/UserInfo.vue
Normal file
355
src/project/saas/AppBackUserList/UserInfo.vue
Normal file
@@ -0,0 +1,355 @@
|
||||
<template>
|
||||
<div class="BackUserList">
|
||||
<div class="user-list">
|
||||
<div class="item">
|
||||
<h2 class="name">{{info.name}}的返乡登记信息</h2>
|
||||
<p><img src="./components/img/org-icon.png" alt=""><span class="start-name">{{info.startAreaName}}</span></p>
|
||||
<p><img src="./components/img/blue-icon.png" alt=""><span class="start-name">{{info.arriveAreaName}}</span></p>
|
||||
<p><img src="./components/img/time-icon.png" alt="">{{info.arriveTime}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="title">基本信息</div>
|
||||
<div class="item-flex">
|
||||
<div class="label">姓名</div>
|
||||
<div class="value">{{info.name}}</div>
|
||||
</div>
|
||||
<div class="item-flex">
|
||||
<div class="label">身份证号</div>
|
||||
<div class="value">{{info.idNumber}}</div>
|
||||
</div>
|
||||
<div class="item-flex">
|
||||
<div class="label">联系方式</div>
|
||||
<div class="value" style="color:#4181FF;" @click="callPhone(info.phone)">
|
||||
<img :src="$cdn + 'common/phone.png'" alt="" class="phone-icon" >
|
||||
{{info.phone}}</div>
|
||||
</div>
|
||||
<div class="item-flex">
|
||||
<div class="label">人员类别</div>
|
||||
<div class="value" :style="info.type == 0 ? 'color:#42D784;' : 'color:#f46;'">{{$dict.getLabel('epidemicMemberType', info.type)}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line-bg"></div>
|
||||
<div class="info">
|
||||
<div class="title">行程信息</div>
|
||||
<div class="item-flex">
|
||||
<div class="label">出行方式</div>
|
||||
<div class="value">{{$dict.getLabel('epidemicRecentTravel', info.travelType)}}</div>
|
||||
</div>
|
||||
<div class="item-flex">
|
||||
<div class="label">出发时间</div>
|
||||
<div class="value">{{info.startTime.substring(0, 16)}}</div>
|
||||
</div>
|
||||
<div class="item-flex">
|
||||
<div class="label">出发地区</div>
|
||||
<div class="value" :style="{color: info.denger == 1 ? '#FF4466' : '#333'}">{{info.startAreaName}}</div>
|
||||
</div>
|
||||
<div class="item-flex">
|
||||
<div class="label">出发地址</div>
|
||||
<div class="value">{{info.startAddress}}</div>
|
||||
</div>
|
||||
<div class="item-flex">
|
||||
<div class="label">到达时间</div>
|
||||
<div class="value">{{info.arriveTime.substring(0, 16)}}</div>
|
||||
</div>
|
||||
<div class="item-flex">
|
||||
<div class="label">返乡地区</div>
|
||||
<div class="value">{{info.arriveAreaName}}</div>
|
||||
</div>
|
||||
<div class="item-flex">
|
||||
<div class="label">返乡地址</div>
|
||||
<div class="value">{{info.arriveAddress}}</div>
|
||||
</div>
|
||||
<div class="item-flex">
|
||||
<div class="label">行程描述</div>
|
||||
<div class="value">{{info.description}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line-bg"></div>
|
||||
<div class="info">
|
||||
<div class="title">核酸检测信息</div>
|
||||
<div class="item-flex">
|
||||
<div class="label">核酸检测日期</div>
|
||||
<div class="value">{{info.checkTime}}</div>
|
||||
</div>
|
||||
<div class="item-flex">
|
||||
<div class="label">核酸检测结果</div>
|
||||
<div class="value" :style="info.checkResult == 1 ? 'color:#f46;' : 'color:#42D784;'">{{$dict.getLabel('epidemicRecentTestResult', info.checkResult)}}</div>
|
||||
</div>
|
||||
<div class="item-flex border-none">
|
||||
<div style="color:#999;">本人健康码截图或核酸检测报告</div>
|
||||
</div>
|
||||
<div class="img-list">
|
||||
<img :src="item.url" alt="" v-for="(item, index) in info.checkPhoto" :key="index" @click="previewImage(info.checkPhoto, item.url)">
|
||||
</div>
|
||||
</div>
|
||||
<div class="line-bg"></div>
|
||||
<div class="info">
|
||||
<div class="title">健康状况</div>
|
||||
<div class="item-flex">
|
||||
<div class="label">当前体温</div>
|
||||
<div class="value" :style="info.temperature >= 37.3 ? 'color:#f46;' : ''">{{info.temperature}}℃</div>
|
||||
</div>
|
||||
<div class="item-flex">
|
||||
<div class="label" style="width:360px;">14天内是否接触新冠确诊或疑似患者</div>
|
||||
<div class="value" :class="'color-'+info.touchInFourteen">{{$dict.getLabel('epidemicTouchInFourteen', info.touchInFourteen)}}</div>
|
||||
</div>
|
||||
<div class="item-flex">
|
||||
<div class="label">当前健康状况</div>
|
||||
<div class="value" >
|
||||
<span v-for="(item, index) in info.health" :key="index" :style="item != 0 ? 'color:#FF4466;' : ''"><span v-if="index>0">;</span>{{$dict.getLabel('epidemicRecentHealth', item)}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line-bg"></div>
|
||||
<div class="info" v-if="list.length || info.releaseName">
|
||||
<div class="title" >异常处理情况</div>
|
||||
<div class="error-list" v-if="list.length">
|
||||
<div class="item" v-for="(item, index) in list" :key="index">
|
||||
<p>{{item.content}}</p>
|
||||
<div>{{item.createTime}}
|
||||
<span>
|
||||
网格员：<span style="margin-left:0;"><AiOpenData v-if="item.createUserName" type="userName" :openid="item.createUserName" /></span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-flex" v-if="info.releaseName">
|
||||
<div class="label">异常解除人</div>
|
||||
<div class="value">
|
||||
<AiOpenData v-if="info.releaseName" type="userName" :openid="info.releaseName" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-flex" v-if="info.releaseName">
|
||||
<div class="label">异常解除时间</div>
|
||||
<div class="value">{{info.releaseTime}}</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="line-bg" style="padding-bottom: 56px;"></div>
|
||||
<div class="footer" @click="toError" v-if="info.status != 1">异常情况处理</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
id: '',
|
||||
info: {},
|
||||
list: []
|
||||
}
|
||||
},
|
||||
computed: { ...mapState(['user']) },
|
||||
onShow() {
|
||||
document.title = '返乡人员信息'
|
||||
},
|
||||
onLoad(option) {
|
||||
this.$dict.load('epidemicMemberType', 'epidemicRecentTravel', 'epidemicTouchInFourteen', 'epidemicRecentTestResult', 'epidemicRecentHealth').then(() => {
|
||||
this.id = option.id
|
||||
this.getDetail()
|
||||
this.getList()
|
||||
})
|
||||
uni.$on('updateDetail', () => {
|
||||
this.getList()
|
||||
this.getDetail()
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
this.$http.post(`/app/appepidemicunusuallog/list?recordId=${this.id}`).then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.list = res.data.records
|
||||
}
|
||||
})
|
||||
},
|
||||
getDetail() {
|
||||
this.$http.post(`/app/appepidemicbackhomerecord/queryDetailById?id=${this.id}`).then((res) => {
|
||||
if (res.data && res.code == 0) {
|
||||
if(res.data.checkTime) {
|
||||
res.data.checkTime = res.data.checkTime.substring(0, 10)
|
||||
}
|
||||
this.info = res.data
|
||||
this.info.checkPhoto = JSON.parse(this.info.checkPhoto)
|
||||
this.info.health = this.info.health.split(',')
|
||||
this.info.idNumber = res.data.idNumber.replace(/(.{6}).*(.{4})/,"$1********$2")
|
||||
}
|
||||
})
|
||||
},
|
||||
callPhone(phone) {
|
||||
uni.makePhoneCall({phoneNumber: phone})
|
||||
},
|
||||
previewImage(images, img) {
|
||||
uni.previewImage({
|
||||
urls: images.map(v => v.url),
|
||||
current: img
|
||||
})
|
||||
},
|
||||
toError() {
|
||||
uni.navigateTo({url: `./ErrorInfo?id=${this.id}`})
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.BackUserList {
|
||||
.user-list{
|
||||
margin-bottom: 24px;
|
||||
.item{
|
||||
padding: 32px 64px 24px;
|
||||
background-color: #fff;
|
||||
.name{
|
||||
font-size: 36px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
line-height: 50px;
|
||||
margin-bottom: 8px;
|
||||
.status{
|
||||
float: right;
|
||||
font-size: 28px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #FF4466;
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
p{
|
||||
font-size: 28px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #333;
|
||||
line-height: 40px;
|
||||
margin-bottom: 8px;
|
||||
img{
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-right: 18px;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
.color-999{
|
||||
margin-bottom: 24px;
|
||||
color: #999;
|
||||
}
|
||||
.start-name{
|
||||
display: inline-block;
|
||||
width: calc(100% - 50px);
|
||||
}
|
||||
}
|
||||
}
|
||||
.info{
|
||||
background-color: #fff;
|
||||
padding: 0 32px;
|
||||
.title{
|
||||
line-height: 116px;
|
||||
background: #FFF;
|
||||
font-size: 38px;
|
||||
font-family: PingFangSC-Semibold, PingFang SC;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
.item-flex{
|
||||
padding: 34px 0;
|
||||
border-bottom: 1px solid #ddd;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
line-height: 44px;
|
||||
font-size: 32px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
.label{
|
||||
width: 206px;
|
||||
color: #999;
|
||||
}
|
||||
.value{
|
||||
width: calc(100% - 206px);
|
||||
word-break: break-all;
|
||||
color: #333;
|
||||
text-align: right;
|
||||
.phone-icon{
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
vertical-align: middle;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
.color-0{
|
||||
color: #42D784;
|
||||
}
|
||||
.color-1{
|
||||
color: #f46;
|
||||
}
|
||||
.color-2{
|
||||
color: #f46;
|
||||
}
|
||||
}
|
||||
.img-list{
|
||||
padding-bottom: 32px;
|
||||
img{
|
||||
width: 320px;
|
||||
height: 320px;
|
||||
}
|
||||
}
|
||||
.item-flex:nth-last-of-type(1){
|
||||
border-bottom: 0;
|
||||
}
|
||||
.error-list {
|
||||
.item {
|
||||
width: 100%;
|
||||
background: #f4f7fe;
|
||||
border-radius: 8px;
|
||||
padding: 24px 24px 18px 24px;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 16px;
|
||||
p {
|
||||
font-size: 28px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #343d65;
|
||||
line-height: 40px;
|
||||
word-break: break-all;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
div {
|
||||
font-size: 24px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #666;
|
||||
line-height: 34px;
|
||||
span {
|
||||
display: inline-block;
|
||||
margin-left: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.text-p{
|
||||
line-height: 44px;
|
||||
color: #333;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
}
|
||||
.line-bg{
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
background-color: #F3F6F9;
|
||||
}
|
||||
.footer{
|
||||
width: 100%;
|
||||
height: 112px;
|
||||
line-height: 112px;
|
||||
background: #1365DD;
|
||||
box-shadow: inset 0px 1px 0px 0px #EEEEEE;
|
||||
font-size: 32px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #FFF;
|
||||
text-align: center;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
.border-none{
|
||||
border-bottom: 0!important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
BIN
src/project/saas/AppBackUserList/components/img/big-user.png
Normal file
BIN
src/project/saas/AppBackUserList/components/img/big-user.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
BIN
src/project/saas/AppBackUserList/components/img/blue-icon.png
Normal file
BIN
src/project/saas/AppBackUserList/components/img/blue-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 282 B |
BIN
src/project/saas/AppBackUserList/components/img/down-icon.png
Normal file
BIN
src/project/saas/AppBackUserList/components/img/down-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 314 B |
BIN
src/project/saas/AppBackUserList/components/img/ewm.png
Normal file
BIN
src/project/saas/AppBackUserList/components/img/ewm.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 625 B |
BIN
src/project/saas/AppBackUserList/components/img/fail.png
Normal file
BIN
src/project/saas/AppBackUserList/components/img/fail.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
src/project/saas/AppBackUserList/components/img/fxry.png
Normal file
BIN
src/project/saas/AppBackUserList/components/img/fxry.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
src/project/saas/AppBackUserList/components/img/gird-icon.png
Normal file
BIN
src/project/saas/AppBackUserList/components/img/gird-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
src/project/saas/AppBackUserList/components/img/header.png
Normal file
BIN
src/project/saas/AppBackUserList/components/img/header.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 161 KiB |
BIN
src/project/saas/AppBackUserList/components/img/jkjc.png
Normal file
BIN
src/project/saas/AppBackUserList/components/img/jkjc.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
BIN
src/project/saas/AppBackUserList/components/img/jujue.png
Normal file
BIN
src/project/saas/AppBackUserList/components/img/jujue.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
src/project/saas/AppBackUserList/components/img/lj.png
Normal file
BIN
src/project/saas/AppBackUserList/components/img/lj.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
BIN
src/project/saas/AppBackUserList/components/img/local-icon.png
Normal file
BIN
src/project/saas/AppBackUserList/components/img/local-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
src/project/saas/AppBackUserList/components/img/map-icon.png
Normal file
BIN
src/project/saas/AppBackUserList/components/img/map-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
src/project/saas/AppBackUserList/components/img/no-admin.png
Normal file
BIN
src/project/saas/AppBackUserList/components/img/no-admin.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
BIN
src/project/saas/AppBackUserList/components/img/org-icon.png
Normal file
BIN
src/project/saas/AppBackUserList/components/img/org-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 277 B |
BIN
src/project/saas/AppBackUserList/components/img/phone-icon.png
Normal file
BIN
src/project/saas/AppBackUserList/components/img/phone-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
BIN
src/project/saas/AppBackUserList/components/img/phone2@.png
Normal file
BIN
src/project/saas/AppBackUserList/components/img/phone2@.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 978 B |
Binary file not shown.
|
After Width: | Height: | Size: 7.7 KiB |
BIN
src/project/saas/AppBackUserList/components/img/right-icon.png
Normal file
BIN
src/project/saas/AppBackUserList/components/img/right-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 373 B |
BIN
src/project/saas/AppBackUserList/components/img/search-icon.png
Normal file
BIN
src/project/saas/AppBackUserList/components/img/search-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 766 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
src/project/saas/AppBackUserList/components/img/success.png
Normal file
BIN
src/project/saas/AppBackUserList/components/img/success.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
src/project/saas/AppBackUserList/components/img/time-icon.png
Normal file
BIN
src/project/saas/AppBackUserList/components/img/time-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
BIN
src/project/saas/AppBackUserList/components/img/tx@2x.png
Normal file
BIN
src/project/saas/AppBackUserList/components/img/tx@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
src/project/saas/AppBackUserList/components/img/user-img.png
Normal file
BIN
src/project/saas/AppBackUserList/components/img/user-img.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
BIN
src/project/saas/AppBackUserList/components/img/wx.png
Normal file
BIN
src/project/saas/AppBackUserList/components/img/wx.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
BIN
src/project/saas/AppBackUserList/components/img/xz.png
Normal file
BIN
src/project/saas/AppBackUserList/components/img/xz.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
src/project/saas/AppBackUserList/components/img/xzh.png
Normal file
BIN
src/project/saas/AppBackUserList/components/img/xzh.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
src/project/saas/AppBackUserList/components/img/zf.png
Normal file
BIN
src/project/saas/AppBackUserList/components/img/zf.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
67
src/project/saas/AppBuilding/AppBuilding.vue
Normal file
67
src/project/saas/AppBuilding/AppBuilding.vue
Normal file
@@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<div class="AppBuilding">
|
||||
<search-map v-if="show && isGridMember"/>
|
||||
<div v-if="!isGridMember" class="empty">
|
||||
<img src="https://cdn.cunwuyun.cn/dvcp/h5/no-data.png" alt="">
|
||||
<p>没有网格员权限<br/>无法查看楼栋信息哦~</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import SearchMap from "./components/searchMap";
|
||||
import {mapState} from "vuex";
|
||||
|
||||
export default {
|
||||
name: 'AppBuilding',
|
||||
components: {SearchMap},
|
||||
appName: '以房找人',
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
isGridMember() {
|
||||
return this.user.girdCheckType > 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: true,
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
this.show = false
|
||||
this.$nextTick(() => {
|
||||
this.show = true
|
||||
})
|
||||
document.title = "以房找人"
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.AppBuilding {
|
||||
height: 100%;
|
||||
|
||||
.empty {
|
||||
height: 100%;
|
||||
|
||||
img {
|
||||
width: 282px;
|
||||
height: 306px;
|
||||
margin: 168px 0 0 234px;
|
||||
}
|
||||
|
||||
p {
|
||||
text-align: center;
|
||||
font-size: 28px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #999;
|
||||
line-height: 44px;
|
||||
|
||||
span {
|
||||
color: #467DFE;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
288
src/project/saas/AppBuilding/add.vue
Normal file
288
src/project/saas/AppBuilding/add.vue
Normal file
@@ -0,0 +1,288 @@
|
||||
<template>
|
||||
<div class="add">
|
||||
<div class="title">
|
||||
<span class="tips"/>房屋信息
|
||||
</div>
|
||||
<div class="pad-l32">
|
||||
<div class="item">
|
||||
<span class="label">房屋面积</span>
|
||||
<div class="value">
|
||||
<u-input type="digit" placeholder="请输入" v-model="houseInfo.houseArea" input-align="right"
|
||||
placeholder-style="color:#999;font-size:16px;" height="48" :maxlength="7"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span class="label">居住现状</span>
|
||||
<div class="value" @click="selectClick('houselivingStatus', 'livingStatus')">
|
||||
<span
|
||||
:class="houseInfo.livingStatus === '' ? 'color-999' : ''">{{
|
||||
$dict.getLabel('houselivingStatus', houseInfo.livingStatus) || '请选择'
|
||||
}}</span>
|
||||
<u-icon name="arrow-right" color="#cccccc" size="14"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span class="label">房屋用途</span>
|
||||
<div class="value" @click="selectClick('houseUseStatus', 'houseUse')">
|
||||
<span
|
||||
:class="houseInfo.houseUse === '' ? 'color-999' : ''">{{
|
||||
$dict.getLabel('houseUseStatus', houseInfo.houseUse) || '请选择'
|
||||
}}</span>
|
||||
<u-icon name="arrow-right" color="#cccccc" size="14"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item" v-if="houseInfo.livingStatus == 1">
|
||||
<span class="label">承租情况</span>
|
||||
<div class="value" @click="selectClick('houseLeaseSituation', 'leaseSituation')">
|
||||
<span
|
||||
:class="houseInfo.leaseSituation === '' ? 'color-999' : ''">{{
|
||||
$dict.getLabel('houseLeaseSituation', houseInfo.leaseSituation) || '请选择'
|
||||
}}</span>
|
||||
<u-icon name="arrow-right" color="#cccccc" size="14"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item" v-if="houseInfo.livingStatus == 1">
|
||||
<span class="label">起租日期</span>
|
||||
<div class="value" @click="dateShow=true">
|
||||
<span :class="houseInfo.startDate === '' ? 'color-999' : ''">{{ $dateFormat(houseInfo.startDate,'YYYY-MM-DD') || '请选择' }}</span>
|
||||
<u-icon name="arrow-right" color="#cccccc" size="14"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item" v-if="houseInfo.livingStatus == 1">
|
||||
<span class="label">租房备案证明</span>
|
||||
<div class="value" @click="selectClick('isFilingCertificateStatus', 'isFilingCertificate')">
|
||||
<span
|
||||
:class="houseInfo.isFilingCertificate === '' ? 'color-999' : ''">{{
|
||||
$dict.getLabel('isFilingCertificateStatus', houseInfo.isFilingCertificate) || '请选择'
|
||||
}}</span>
|
||||
<u-icon name="arrow-right" color="#cccccc" size="14"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line-bg"/>
|
||||
<div class="title">
|
||||
<span class="tips"/>房主信息
|
||||
<AiPagePicker class="select" :selected.sync="houseInfo.owner">选择人员</AiPagePicker>
|
||||
</div>
|
||||
<div class="pad-l32">
|
||||
<div class="item" v-for="(item, index) in houseInfo.owner" :key="index">
|
||||
<span class="label">{{ item.name }}</span>
|
||||
<div class="value" @click="tableRelationSelect('owner', index)">
|
||||
<span
|
||||
:class=" item.relation === '' ? 'color-999' : ''">{{
|
||||
$dict.getLabel('householdRelation', item.relation) || '与户主关系'
|
||||
}}</span>
|
||||
<u-icon name="arrow-right" color="#cccccc" size="14"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line-bg"/>
|
||||
<div class="title">
|
||||
<span class="tips"/>承租人信息
|
||||
<AiPagePicker class="select" :selected.sync="houseInfo.renter">选择人员</AiPagePicker>
|
||||
</div>
|
||||
<div class="pad-l32">
|
||||
<div class="item" v-for="(item, index) in houseInfo.renter" :key="index">
|
||||
<span class="label">{{ item.name }}</span>
|
||||
<div class="value" @click="tableRelationSelect('renter', index)">
|
||||
<span
|
||||
:class=" item.relation === '' ? 'color-999' : ''">{{
|
||||
$dict.getLabel('householdRelation', item.relation) || '与户主关系'
|
||||
}}</span>
|
||||
<u-icon name="arrow-right" color="#cccccc" size="14"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line-bg"/>
|
||||
<div class="title">
|
||||
<span class="tips"/>实际居住人员
|
||||
<AiPagePicker class="select" :selected.sync="houseInfo.live">选择人员</AiPagePicker>
|
||||
</div>
|
||||
<div class="pad-l32">
|
||||
<div class="item" v-for="(item, index) in houseInfo.live" :key="index">
|
||||
<span class="label">{{ item.name }}</span>
|
||||
<div class="value" @click="tableRelationSelect('live', index)">
|
||||
<span
|
||||
:class=" item.relation === '' ? 'color-999' : ''">{{
|
||||
$dict.getLabel('householdRelation', item.relation) || '与户主关系'
|
||||
}}</span>
|
||||
<u-icon name="arrow-right" color="#cccccc" size="14"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer" @click="submit">
|
||||
<div class="btn">保存</div>
|
||||
</div>
|
||||
|
||||
<u-picker mode="time" v-model="dateShow" :params="deteParams" start-year="1900" @confirm="dateConfirm">请选择
|
||||
</u-picker>
|
||||
<u-select v-model="showSelect" :list="selectList" label-name="dictName" value-name="dictValue"
|
||||
@confirm="confirmSelect"/>
|
||||
<u-select v-model="showRelation" :list="$dict.getDict('householdRelation')" label-name="dictName"
|
||||
value-name="dictValue" @confirm="confirmRelation"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapActions, mapState} from 'vuex'
|
||||
|
||||
export default {
|
||||
|
||||
data() {
|
||||
return {
|
||||
houseInfo: {},
|
||||
showSelect: false,
|
||||
selectList: [],
|
||||
formName: '',
|
||||
dateShow: false,
|
||||
deteParams: {year: true, month: true, day: true, hour: false, minute: false, second: false},
|
||||
showRelation: false,
|
||||
tableName: '',
|
||||
tableIndex: '',
|
||||
lockSelector: false
|
||||
}
|
||||
},
|
||||
computed: {...mapState(['user'])},
|
||||
created() {
|
||||
this.$dict.load('householdRelation', 'houselivingStatus', 'houseLeaseSituation', 'houseUseStatus',
|
||||
'isFilingCertificateStatus', 'communityBuildingType', 'yesOrNo', 'BulidResidentType').then(() => {
|
||||
this.getDetail()
|
||||
})
|
||||
},
|
||||
onShow() {
|
||||
document.title = '房屋信息'
|
||||
},
|
||||
|
||||
methods: {
|
||||
...mapActions(['selectEnterpriseContact']),
|
||||
tableRelationSelect(name, index) {
|
||||
this.tableName = name
|
||||
this.tableIndex = index
|
||||
this.showRelation = true
|
||||
},
|
||||
confirmRelation(e) {
|
||||
this.houseInfo[this.tableName][this.tableIndex].relation = e[0].value
|
||||
},
|
||||
getDetail() {
|
||||
let {id} = this.$route.query
|
||||
id && this.$http.post(`/app/appcommunityhouseinfo/queryDetailById?id=${id}`).then(res => {
|
||||
if (res?.data) {
|
||||
this.houseInfo = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
submit() {
|
||||
this.$http.post(`/app/appcommunityhouseinfo/update`, this.houseInfo).then(res => {
|
||||
if (res?.code == 0) {
|
||||
this.$u.toast('提交成功')
|
||||
uni.$emit('changeHouseInfo')
|
||||
setTimeout(() => {
|
||||
uni.navigateBack({})
|
||||
}, 600)
|
||||
}
|
||||
})
|
||||
},
|
||||
selectClick(dictName, formName) {
|
||||
this.selectList = this.$dict.getDict(dictName)
|
||||
this.formName = formName
|
||||
this.showSelect = true
|
||||
},
|
||||
confirmSelect(e) {
|
||||
this.houseInfo[this.formName] = e[0].value
|
||||
},
|
||||
dateConfirm(e) {
|
||||
this.houseInfo.startDate = `${e.year}-${e.month}-${e.day} 00:00:00`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.add {
|
||||
padding-bottom: 112px;
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
height: 96px;
|
||||
line-height: 96px;
|
||||
background: #FFF;
|
||||
font-size: 32px;
|
||||
font-weight: 500;
|
||||
color: #262B36;
|
||||
padding-right: 32px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
|
||||
.tips {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 32px;
|
||||
background: #4E75FE;
|
||||
box-shadow: 0 8px 24px 2px #C9D8FA;
|
||||
border-radius: 4px;
|
||||
vertical-align: middle;
|
||||
margin-right: 22px;
|
||||
}
|
||||
|
||||
.select {
|
||||
float: right;
|
||||
font-size: 30px;
|
||||
color: #1365DD;
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 100%;
|
||||
padding: 34px 32px 34px 0;
|
||||
background: #FFFFFF;
|
||||
border-bottom: 1px solid #D8DDE6;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 32px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #333;
|
||||
line-height: 44px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.color-999 {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.value {
|
||||
.u-icon {
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
height: 112px;
|
||||
line-height: 112px;
|
||||
text-align: center;
|
||||
background: #1365DD;
|
||||
font-size: 32px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.line-bg {
|
||||
width: 100%;
|
||||
height: 16px;
|
||||
background: #F5F5F5;
|
||||
}
|
||||
|
||||
.pad-l32 {
|
||||
padding-left: 32px;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
BIN
src/project/saas/AppBuilding/components/img/back-icon.png
Normal file
BIN
src/project/saas/AppBuilding/components/img/back-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 545 B |
BIN
src/project/saas/AppBuilding/components/img/build-icon.png
Normal file
BIN
src/project/saas/AppBuilding/components/img/build-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 866 B |
BIN
src/project/saas/AppBuilding/components/img/check-icon.png
Normal file
BIN
src/project/saas/AppBuilding/components/img/check-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
src/project/saas/AppBuilding/components/img/cir-icon.png
Normal file
BIN
src/project/saas/AppBuilding/components/img/cir-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
src/project/saas/AppBuilding/components/img/del-icon.png
Normal file
BIN
src/project/saas/AppBuilding/components/img/del-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 757 B |
BIN
src/project/saas/AppBuilding/components/img/model-icon.png
Normal file
BIN
src/project/saas/AppBuilding/components/img/model-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
BIN
src/project/saas/AppBuilding/components/img/search-icon.png
Normal file
BIN
src/project/saas/AppBuilding/components/img/search-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
src/project/saas/AppBuilding/components/img/user-icon.png
Normal file
BIN
src/project/saas/AppBuilding/components/img/user-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 892 B |
BIN
src/project/saas/AppBuilding/components/img/user-img.png
Normal file
BIN
src/project/saas/AppBuilding/components/img/user-img.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
614
src/project/saas/AppBuilding/components/searchMap.vue
Normal file
614
src/project/saas/AppBuilding/components/searchMap.vue
Normal file
@@ -0,0 +1,614 @@
|
||||
<template>
|
||||
<div class="searchMap">
|
||||
<div class="grid-input">
|
||||
<img src="./img/back-icon.png" alt="" class="back-icon" v-if="name && show" @click="show=false">
|
||||
<img src="./img/search-icon.png" alt="" class="search-icon" v-else>
|
||||
<input type="text" class="input" placeholder="请输入姓名、房屋信息" v-model="name" maxlength="10" confirm-type="search"
|
||||
@confirm="search"/>
|
||||
<div class="clear-btn">
|
||||
<img src="./img/del-icon.png" alt="" class="del-icon" v-if="name" @click="clear">
|
||||
</div>
|
||||
<span class="search-btn" @click="search">搜索</span>
|
||||
</div>
|
||||
<div class="search-list" v-if="show">
|
||||
<div class="title border">
|
||||
<img src="./img/search-icon.png" alt="" class="search-icon">{{ name }}
|
||||
</div>
|
||||
<div class="item border" v-for="(item, index) in buildList" :key="index" @click="getBuildingInfo(item)">
|
||||
<img src="./img/user-icon.png" alt="" class="search-icon user-icon">
|
||||
<div class="item-content">
|
||||
<h3>{{ item.residentName }}</h3>
|
||||
<p>{{ item.areaName || '' }}{{ item.createAddress }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="build-btn" @click="toList()">
|
||||
<img src="./img/build-icon.png" alt=""> 楼栋<br/>列表
|
||||
</div>
|
||||
<div class="map-content">
|
||||
<AiTMap :map.sync="map" :lib.sync="lib" :ops="ops" :libraries="['service', 'tools']"/>
|
||||
</div>
|
||||
<u-popup v-model="showPop" mode="bottom" border-radius="14">
|
||||
<div class="popup">
|
||||
<div class="bg"></div>
|
||||
<div class="title">{{ detailInfo.house.createAddress || '' }}</div>
|
||||
<p class="address" v-if="detailInfo.community">{{ detailInfo.community.address || '' }}</p>
|
||||
<div class="info-flex">
|
||||
<span class="label">所属社区</span>
|
||||
<span class="value">{{ detailInfo.build.areaName }}</span>
|
||||
</div>
|
||||
<div class="info-flex">
|
||||
<span class="label">所属小区</span>
|
||||
<span class="value">{{ detailInfo.build.communityName }}</span>
|
||||
</div>
|
||||
<div class="info-flex">
|
||||
<span class="label">房屋类型</span>
|
||||
<span class="value">{{ $dict.getLabel('communityBuildingType', detailInfo.house.buildingType) }}</span>
|
||||
</div>
|
||||
<div class="info-flex">
|
||||
<span class="label">所属网格</span>
|
||||
<span class="value" v-if="detailInfo.build && detailInfo.build.appGirdInfo">{{ detailInfo.build.appGirdInfo.girdName || '' }}</span>
|
||||
</div>
|
||||
<div class="info-flex">
|
||||
<span class="label">网格管理员</span>
|
||||
<span class="value" v-if="detailInfo.build.appGirdInfo && detailInfo.build.appGirdInfo.girdMemberNames && detailInfo.build.appGirdInfo.girdMemberNames.length">
|
||||
<span v-for="(item, index) in detailInfo.build.appGirdInfo.girdMemberNames" :key="index">
|
||||
<AiOpenData v-if="item" type="userName" :openid="item" style="display:inline-block;" /><span v-if="index<detailInfo.build.appGirdInfo.girdMemberNames.length-1">,</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="info-flex">
|
||||
<span class="label">楼栋长</span>
|
||||
<span
|
||||
class="value">{{ detailInfo.build.managerName || '' }}
|
||||
<!-- {{
|
||||
detailInfo.build.managerPhone || ''
|
||||
}}
|
||||
<img :src="$cdn + 'common/phone.png'" alt="" @click="callPhone(detailInfo.build.managerPhone)"
|
||||
class="phone-icon" v-if="detailInfo.build.managerPhone"> -->
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="popup-btn" @click="toDetail(detailInfo.build.id)">查看楼栋模型</div>
|
||||
</u-popup>
|
||||
<u-popup v-model="buildPopup" mode="bottom" border-radius="14">
|
||||
<div class="popup">
|
||||
<div class="bg"/>
|
||||
<div class="title">{{ building.createAddress || '' }}</div>
|
||||
<div class="info-flex">
|
||||
<span class="label">所属社区</span>
|
||||
<span class="value">{{ building.areaName }}</span>
|
||||
</div>
|
||||
<div class="info-flex">
|
||||
<span class="label">所属小区</span>
|
||||
<span class="value">{{ building.communityName }}</span>
|
||||
</div>
|
||||
<div class="info-flex">
|
||||
<span class="label">房屋类型</span>
|
||||
<span class="value">{{ $dict.getLabel('communityBuildingType', building.buildingType) }}</span>
|
||||
</div>
|
||||
<div class="info-flex">
|
||||
<span class="label">所属网格</span>
|
||||
<span class="value" v-text="building.girdName||''"/>
|
||||
</div>
|
||||
<div class="info-flex">
|
||||
<span class="label">网格管理员</span>
|
||||
<span class="value">
|
||||
<span v-for="(item, index) in building.girdMemberNames" :key="index">
|
||||
<AiOpenData v-if="item" type="userName" :openid="item" style="display:inline-block;" /><span v-if="index<building.girdMemberNames.length-1">,</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="info-flex">
|
||||
<span class="label">楼栋长</span>
|
||||
<span
|
||||
class="value">{{ building.managerName || '' }}
|
||||
<!-- {{ building.managerPhone || '' }}
|
||||
<img :src="$cdn + 'common/phone.png'" alt="" @click="callPhone(detailInfo.build.managerPhone)"
|
||||
class="phone-icon" v-if="detailInfo.build.managerPhone"> -->
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="popup-btn" @click="toDetail(building.id)">查看楼栋模型</div>
|
||||
</u-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState} from 'vuex'
|
||||
|
||||
export default {
|
||||
name:"searchMap",
|
||||
data() {
|
||||
return {
|
||||
ops: {},
|
||||
lib: null,
|
||||
map: null,
|
||||
markerArr: [],
|
||||
show: false,
|
||||
value: '',
|
||||
ClusterBubble: null,
|
||||
name: '',
|
||||
buildList: [],
|
||||
detailInfo: {
|
||||
house: {},
|
||||
build: {},
|
||||
community: {},
|
||||
gird: {}
|
||||
},
|
||||
showPop: false,
|
||||
retryMapCount: 0,
|
||||
building: {},
|
||||
buildPopup: false
|
||||
}
|
||||
},
|
||||
computed: {...mapState(['user', 'config'])},
|
||||
mounted() {
|
||||
this.getCommunityList().then(points => {
|
||||
this.getMarkerCluster(points)
|
||||
})
|
||||
},
|
||||
onShow() {
|
||||
document.title = "以房找人"
|
||||
},
|
||||
created() {
|
||||
this.$dict.load("communityBuildingType")
|
||||
},
|
||||
methods: {
|
||||
getCommunityList() {
|
||||
return this.$http.post('/app/appcommunitybuildinginfo/listByBuilding', null, {
|
||||
params: {
|
||||
current: 1,
|
||||
size: 1000000,
|
||||
}
|
||||
}).then(res => {
|
||||
if (res?.data) {
|
||||
this.buildList = res.data
|
||||
return res.data.map(item => {
|
||||
return {
|
||||
...item,
|
||||
lnglat: [item.lng, item.lat],
|
||||
buildingNumber: item.name || item.buildingNumber,
|
||||
communityName: item.name || item.communityName,
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
getMarkerCluster(points, count = 0) {
|
||||
let {lib: TMap, map} = this
|
||||
if (map) {
|
||||
// map.setCenter(this.config.latlng)
|
||||
let MarkerCluster = new TMap.MarkerCluster({
|
||||
map, gridSize: 60,
|
||||
enableDefaultStyle: false, // 关闭默认样式
|
||||
geometries: points?.map(e => ({
|
||||
position: new TMap.LatLng(e.lat, e.lng),
|
||||
content: `${e.createAddress} | ${e.houseNum}户`,
|
||||
properties: {...e}
|
||||
})) || [],
|
||||
zoomOnClick: true
|
||||
})
|
||||
let geometries = [], marker, markers = []
|
||||
MarkerCluster.on('cluster_changed', () => {
|
||||
if (markers.length) {
|
||||
markers.forEach(function (item) {
|
||||
item.destroy();
|
||||
})
|
||||
markers = [];
|
||||
}
|
||||
geometries = []
|
||||
let clusters = MarkerCluster.getClusters()
|
||||
clusters.forEach((item) => {
|
||||
if (item.geometries?.length > 1) {
|
||||
//聚合样式
|
||||
geometries.push({
|
||||
styleId: 'cluster',
|
||||
position: item.center,
|
||||
properties: {...item},
|
||||
content: item.geometries.length?.toString() || "0"
|
||||
})
|
||||
} else {
|
||||
//点标记样式
|
||||
// 创建气泡DOM元素
|
||||
class ClusterBubble extends TMap.DOMOverlay {
|
||||
constructor(options) {
|
||||
super(options);
|
||||
}
|
||||
|
||||
onInit(options) {
|
||||
this.content = options.content;
|
||||
this.position = options.position;
|
||||
};
|
||||
|
||||
onDestroy() {
|
||||
this.dom.removeEventListener('click', this.onClick);
|
||||
this.removeAllListeners();
|
||||
}
|
||||
|
||||
createDOM() {
|
||||
let dom = document.createElement('div');
|
||||
dom.classList.add('marker');
|
||||
dom.innerText = this.content;
|
||||
|
||||
// 监听点击事件，实现zoomOnClick
|
||||
this.onClick = this.onClick.bind(this);
|
||||
// pc端注册click事件，移动端注册touchend事件
|
||||
dom.addEventListener('click', this.onClick);
|
||||
dom.addEventListener('touchend', this.onClick);
|
||||
return dom;
|
||||
};
|
||||
|
||||
updateDOM() {
|
||||
if (!this.map) {
|
||||
return;
|
||||
}
|
||||
// 经纬度坐标转容器像素坐标
|
||||
let pixel = this.map.projectToContainer(this.position);
|
||||
|
||||
// 使文本框中心点对齐经纬度坐标点
|
||||
let left = pixel.getX() - this.dom.clientWidth / 2 + 'px';
|
||||
let top = pixel.getY() - this.dom.clientHeight / 2 + 'px';
|
||||
this.dom.style.transform = `translate(${left}, ${top})`;
|
||||
this.emit('dom_updated');
|
||||
};
|
||||
|
||||
onClick() {
|
||||
this.emit('click');
|
||||
}
|
||||
}
|
||||
|
||||
let {content} = item.geometries?.[0] || {},
|
||||
overlay = new ClusterBubble({map, position: item.center, content})
|
||||
overlay.on('click', () => {
|
||||
this.buildPopup = true
|
||||
this.building = item.geometries?.[0]?.properties || {}
|
||||
this.building.girdMemberNames = this.building.girdMemberNames.split(',')
|
||||
})
|
||||
markers.push(overlay)
|
||||
}
|
||||
});
|
||||
if (marker) {
|
||||
marker.setGeometries(geometries)
|
||||
} else {
|
||||
marker = new TMap.MultiMarker({
|
||||
map, enableCollision: true, geometries,
|
||||
styles: {
|
||||
cluster: new TMap.MarkerStyle({
|
||||
width: 48,
|
||||
height: 48,
|
||||
anchor: {x: 24, y: 24},
|
||||
src: this.$cdn + "/map/cluster.png",
|
||||
color: '#fff',
|
||||
// direction: 'center',
|
||||
size: 18
|
||||
})
|
||||
},
|
||||
})
|
||||
marker.on('click', (e) => {
|
||||
let {bounds} = e.geometry.properties
|
||||
map.fitBounds(bounds)
|
||||
})
|
||||
}
|
||||
})
|
||||
return Promise.resolve()
|
||||
} else {
|
||||
if (count < 5) {
|
||||
setTimeout(() => {
|
||||
return this.getMarkerCluster(points, ++count)
|
||||
}, 1000)
|
||||
} else Promise.reject("加载失败")
|
||||
}
|
||||
},
|
||||
clear() {
|
||||
this.name = ''
|
||||
},
|
||||
search() {
|
||||
this.buildList = []
|
||||
this.$http.post('/app/appcommunityhouseinfo/queryHouseByName', null, {
|
||||
params: {
|
||||
current: 1,
|
||||
size: 20,
|
||||
name: this.name
|
||||
}
|
||||
}).then(res => {
|
||||
if (res.code == 0 && res.data.length) {
|
||||
this.show = true
|
||||
this.buildList = res.data
|
||||
const points = res.data.map(item => {
|
||||
if(item.lng && item.lat) {
|
||||
return {
|
||||
lnglat: [item.lng, item.lat],
|
||||
id: item.id,
|
||||
corpId: item.corpId,
|
||||
areaName: item.areaName,
|
||||
buildingNumber: item.name || item.buildingNumber,
|
||||
communityName: item.name || item.communityName,
|
||||
}
|
||||
}
|
||||
})
|
||||
this.getMarkerCluster(points)
|
||||
} else {
|
||||
this.show = false
|
||||
this.$u.toast('未搜索到结果，请换个关键字重试！')
|
||||
}
|
||||
})
|
||||
},
|
||||
getBuildingInfo(item) {
|
||||
this.$http.post(`/app/appcommunityhouseinfo/queryDetailByIdWithBuilding?buildId=${item.buildingId}&houseId=${item.id}`).then(res => {
|
||||
if (res?.data) {
|
||||
|
||||
this.detailInfo = {...res.data}
|
||||
|
||||
console.log(this.detailInfo)
|
||||
if(this.detailInfo.build.appGirdInfo.girdMemberNames && this.detailInfo.build.appGirdInfo.girdMemberNames) {
|
||||
this.detailInfo.build.appGirdInfo.girdMemberNames = this.detailInfo.build.appGirdInfo.girdMemberNames.split(',')
|
||||
}
|
||||
this.show = false
|
||||
this.showPop = true
|
||||
}
|
||||
})
|
||||
},
|
||||
toList() {
|
||||
uni.navigateTo({url: './list'})
|
||||
},
|
||||
callPhone(phone) {
|
||||
uni.makePhoneCall({phoneNumber: phone})
|
||||
},
|
||||
toDetail(id) {
|
||||
uni.navigateTo({url: `./detail?id=${id}`})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.searchMap {
|
||||
height: 100vh;
|
||||
|
||||
.grid-input {
|
||||
width: calc(100% - 64px);
|
||||
height: 88px;
|
||||
background: #FFF;
|
||||
box-shadow: 0 4px 8px 0 rgba(192, 185, 185, 0.5);
|
||||
border-radius: 16px;
|
||||
position: fixed;
|
||||
top: 24px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 99999;
|
||||
padding: 16px 20px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.search-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.input {
|
||||
display: inline-block;
|
||||
padding: 8px 0;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
width: calc(100% - 220px);
|
||||
font-size: 28px;
|
||||
font-family: MicrosoftYaHei;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.back-icon {
|
||||
width: 16px;
|
||||
height: 32px;
|
||||
margin-right: 24px;
|
||||
vertical-align: super;
|
||||
}
|
||||
|
||||
.clear-btn {
|
||||
display: inline-block;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-right: 30px;
|
||||
}
|
||||
|
||||
.del-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
vertical-align: super;
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
display: inline-block;
|
||||
width: 80px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
text-align: right;
|
||||
font-size: 28px;
|
||||
font-family: MicrosoftYaHei;
|
||||
color: #1365DD;
|
||||
border-left: 1px solid #DEDFE0;
|
||||
vertical-align: top;
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.search-list {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: calc(100% - 130px);
|
||||
overflow-y: scroll;
|
||||
top: 128px;
|
||||
left: 0;
|
||||
box-sizing: border-box;
|
||||
z-index: 99999;
|
||||
|
||||
.search-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
margin-right: 16px;
|
||||
vertical-align: sub;
|
||||
}
|
||||
|
||||
.title {
|
||||
height: 82px;
|
||||
line-height: 82px;
|
||||
font-size: 26px;
|
||||
font-family: MicrosoftYaHeiSemibold;
|
||||
color: #1365DD;
|
||||
padding-left: 44px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: 22px 44px 24px 44px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.item-content {
|
||||
display: inline-block;
|
||||
width: 610px;
|
||||
color: #333;
|
||||
|
||||
h3 {
|
||||
font-size: 28px;
|
||||
font-family: MicrosoftYaHeiSemibold;
|
||||
line-height: 32px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
p {
|
||||
width: 100%;
|
||||
font-size: 24px;
|
||||
font-family: MicrosoftYaHei;
|
||||
line-height: 32px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.user-icon {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.border {
|
||||
border-bottom: 1px solid #DEDFE1;
|
||||
}
|
||||
}
|
||||
|
||||
.build-btn {
|
||||
width: 80px;
|
||||
height: 160px;
|
||||
background: #FFF;
|
||||
box-shadow: 0 4px 8px 0 rgba(138, 138, 138, 0.5);
|
||||
border-radius: 8px;
|
||||
position: fixed;
|
||||
bottom: 136px;
|
||||
right: 24px;
|
||||
z-index: 99999;
|
||||
padding: 16px 16px 0;
|
||||
box-sizing: border-box;
|
||||
font-size: 24px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #666;
|
||||
line-height: 30px;
|
||||
|
||||
img {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.map-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.popup {
|
||||
padding: 0 32px 16px;
|
||||
|
||||
.bg {
|
||||
width: 64px;
|
||||
height: 10px;
|
||||
background: #CCC;
|
||||
border-radius: 6px;
|
||||
margin: 32px 0 32px 344px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 36px;
|
||||
font-family: PingFang-SC-Heavy, PingFang-SC;
|
||||
font-weight: 800;
|
||||
color: #333;
|
||||
line-height: 50px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.info-flex {
|
||||
padding: 26px 0 30px 0;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #D8DDE6;
|
||||
line-height: 40px;
|
||||
font-size: 28px;
|
||||
|
||||
.label {
|
||||
display: inline-block;
|
||||
width: 160px;
|
||||
font-weight: 800;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: #666;
|
||||
font-size: 26px;
|
||||
|
||||
.phone-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
vertical-align: sub;
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.popup-btn {
|
||||
width: 100%;
|
||||
font-size: 32px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
height: 112px;
|
||||
line-height: 112px;
|
||||
text-align: center;
|
||||
background: #1365DD;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
::v-deep.marker {
|
||||
color: #fff;
|
||||
background: #5088FF;
|
||||
padding: 0 32px;
|
||||
width: fit-content;
|
||||
height: 56px;
|
||||
border-radius: 52px;
|
||||
transform: translate(-50%, -50%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:before {
|
||||
content: " ";
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
transform: translate(-50%, 100%);
|
||||
border: 12px solid transparent;
|
||||
border-top-color: #5088FF;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
538
src/project/saas/AppBuilding/detail.vue
Normal file
538
src/project/saas/AppBuilding/detail.vue
Normal file
@@ -0,0 +1,538 @@
|
||||
<template>
|
||||
<div class="detail">
|
||||
<AiTopFixed>
|
||||
<div class="select-flex" @click="showSelect=true">
|
||||
<span class="name" v-text="cellName"/>
|
||||
<span class="btn">单元切换</span>
|
||||
</div>
|
||||
<div class="line-bg"></div>
|
||||
<div class="num-content">
|
||||
<div class="num-item">
|
||||
<div class="content">
|
||||
<h2>{{ numInfo['实有户数'] || 0 }}</h2>
|
||||
<p>实有户数</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="num-item">
|
||||
<div class="content">
|
||||
<h2>{{ numInfo['实有人口'] || 0 }}</h2>
|
||||
<p>实有人口</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="num-item">
|
||||
<div class="content">
|
||||
<h2>{{ numInfo['流动人口'] || 0 }}</h2>
|
||||
<p>流动人口</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line-bg"></div>
|
||||
</AiTopFixed>
|
||||
<div class="list-content">
|
||||
<div class="left">
|
||||
<div class="item-content" v-for="(item, index) in list" :key="index" @click="getHouseDetail(item.id)">
|
||||
<div class="item">
|
||||
<h2>{{ item.houseCode }}</h2>
|
||||
<p v-text="`${item.livingNumber}人`.replace(/0人/,'无人')"/>
|
||||
</div>
|
||||
</div>
|
||||
<AiEmpty v-if="!list.length" style="padding-bottom:80px;"/>
|
||||
</div>
|
||||
</div>
|
||||
<u-select v-model="showSelect" :list="selectList" label-name="cellName" value-name="eachUnitNumber"
|
||||
@confirm="confirmSelect"/>
|
||||
<u-popup v-model="show" mode="bottom" border-radius="14" height="1000">
|
||||
<div class="popup">
|
||||
<div class="bg"></div>
|
||||
<div class="title">{{ houseInfo.createAddress }}</div>
|
||||
<div class="row-info">
|
||||
<div class="row-item left">
|
||||
<h3>{{ `${houseInfo.houseArea || 0}㎡`.replace(/0㎡/, "未统计") }} </h3>
|
||||
<p>房屋面积</p>
|
||||
</div>
|
||||
<div class="row-item center">
|
||||
<span class="right-line"></span>
|
||||
<span class="left-line"></span>
|
||||
<h3>{{ $dict.getLabel('houseUseStatus', houseInfo.houseUse) || "无" }} </h3>
|
||||
<p>房屋用途</p>
|
||||
</div>
|
||||
<div class="row-item right">
|
||||
<h3>{{ $dict.getLabel('houselivingStatus', houseInfo.livingStatus) || "未使用" }}</h3>
|
||||
<p>居住现状</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-info" v-if="!!houseInfo.leaseSituation">
|
||||
<div class="row-item left">
|
||||
<h3>{{ $dict.getLabel('houseLeaseSituation', houseInfo.leaseSituation) || "无" }}</h3>
|
||||
<p>承租情况</p>
|
||||
</div>
|
||||
<div class="row-item center">
|
||||
<span class="right-line"></span>
|
||||
<span class="left-line"></span>
|
||||
<h3>{{ $dateFormat(houseInfo.startDate,'YYYY-MM-DD') }}</h3>
|
||||
<p>起租日期</p>
|
||||
</div>
|
||||
<div class="row-item right">
|
||||
<h3>{{ houseInfo.isFilingCertificate == 1 ? '有' : '无' }}</h3>
|
||||
<p>租房备案证明</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="houseInfo.owner.length || houseInfo.renter.length">
|
||||
<div class="line-bg"></div>
|
||||
<div class="popup" v-if="houseInfo.owner.length">
|
||||
<div class="title pad-t32">房主信息</div>
|
||||
<div class="info-flex" v-for="(item, index) in houseInfo.owner" :key="index">
|
||||
<div class="item">
|
||||
<span class="label">房主：</span>
|
||||
<span class="value">{{ item.name }}</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span class="label">联系方式：</span>{{ item.phone }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="popup" v-if="houseInfo.renter.length">
|
||||
<div class="title pad-t32">承租人信息</div>
|
||||
<div class="info-flex" v-for="(item, index) in houseInfo.renter" :key="index">
|
||||
<div class="item">
|
||||
<span class="label">房主：</span>
|
||||
<span class="value">{{ item.name }}</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span class="label">联系方式：</span>{{ item.phone }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="houseInfo.live.length">
|
||||
<div class="line-bg"></div>
|
||||
<div class="popup">
|
||||
<div class="title pad-t32">实际居住人员</div>
|
||||
<div v-for="(item, index) in houseInfo.live" :key="index">
|
||||
<div class="info-flex">
|
||||
<div class="item">
|
||||
<span class="label">居住人：</span>
|
||||
<span class="value">{{ item.name }}</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span class="label">联系方式：</span>{{ item.phone }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-flex mar-t48">
|
||||
<div class="item">
|
||||
<span class="label">与户主关系：</span>{{ $dict.getLabel('householdRelation', item.relation) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pad-b112"></div>
|
||||
<div class="pop-btn" @click="toAdd(houseInfo.id)">编辑修改</div>
|
||||
</u-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState} from 'vuex'
|
||||
|
||||
export default {
|
||||
props: ['params'],
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
communityId: '',
|
||||
list: [],
|
||||
houseInfo: {
|
||||
owner: [],
|
||||
renter: [],
|
||||
live: []
|
||||
},
|
||||
numInfo: {},
|
||||
showSelect: false,
|
||||
selectList: [],
|
||||
selectCellIndex: 0,
|
||||
houseId: '',
|
||||
detail: {},
|
||||
eachUnitNumber: 1
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
cellName() {
|
||||
return this.selectList.find(e => e.eachUnitNumber == this.eachUnitNumber)?.cellName || ""
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
document.title = "楼栋模型"
|
||||
this.$dict.load('householdRelation', 'houselivingStatus', 'houseLeaseSituation', 'houseUseStatus',
|
||||
'isFilingCertificateStatus', 'communityBuildingType', 'yesOrNo', 'BulidResidentType')
|
||||
this.getBuilding()
|
||||
uni.$on('changeHouseInfo', res => {
|
||||
this.getHouseDetail(this.houseInfo.id)
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
getSelectList(communityId) {
|
||||
//通过小区ID获取楼栋列表,用来切换楼栋
|
||||
this.$http.post(`/app/appcommunitybuildinginfo/listByUnitNumber`, null, {
|
||||
params: {communityId, size: 999}
|
||||
}).then(res => {
|
||||
if (res?.data) {
|
||||
this.selectList = []
|
||||
let {unitNumber, buildingNumber} = this.detail,
|
||||
{communityName} = res.data.records?.[0]
|
||||
for (let i = 1; i <= unitNumber; i++) {
|
||||
this.selectList.push({
|
||||
eachUnitNumber: i,
|
||||
cellName: `${communityName + buildingNumber}栋${i}单元`
|
||||
})
|
||||
}
|
||||
this.eachUnitNumber = this.selectList[0].eachUnitNumber
|
||||
this.getStatistics()
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
},
|
||||
getBuilding() {
|
||||
//获取楼栋信息
|
||||
let {id} = this.$route.query
|
||||
this.$http.post(`/app/appcommunitybuildinginfo/queryDetailById`, null, {
|
||||
params: {id}
|
||||
}).then(res => {
|
||||
if (res?.data) {
|
||||
this.detail = res.data
|
||||
this.getSelectList(res.data.communityId)
|
||||
}
|
||||
})
|
||||
},
|
||||
getStatistics() {
|
||||
//获取楼栋统计信息
|
||||
let {id} = this.detail
|
||||
this.$http.post(`/app/appcommunitybuildinginfo/statistics`, null, {
|
||||
params: {id, unitNum: this.eachUnitNumber}
|
||||
}).then(res => {
|
||||
if (res?.data) {
|
||||
this.numInfo = res.data.unit
|
||||
}
|
||||
})
|
||||
},
|
||||
getList() {
|
||||
//获取房间列表
|
||||
let {id: buildingId} = this.detail
|
||||
this.$http.post(`/app/appcommunityhouseinfo/list`, null, {
|
||||
params: {size: 10000, buildingId, unitNumber: this.eachUnitNumber}
|
||||
}).then(res => {
|
||||
if (res?.data) {
|
||||
this.list = res.data.records
|
||||
}
|
||||
})
|
||||
},
|
||||
getHouseDetail(id) {
|
||||
this.houseId = id
|
||||
this.$http.post(`/app/appcommunityhouseinfo/queryDetailById?id=${id}`).then(res => {
|
||||
if (res?.data) {
|
||||
this.houseInfo = res.data
|
||||
this.show = true
|
||||
}
|
||||
})
|
||||
},
|
||||
confirmSelect(e) {
|
||||
this.eachUnitNumber = e[0].value
|
||||
this.getStatistics()
|
||||
this.getList()
|
||||
},
|
||||
toAdd(id) {
|
||||
uni.navigateTo({url: `./add?id=${id}`})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.detail {
|
||||
.select-flex {
|
||||
padding: 20px 40px 40px;
|
||||
box-sizing: border-box;
|
||||
line-height: 50px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background-color: #fff;
|
||||
|
||||
.name {
|
||||
width: 560px;
|
||||
word-break: break-all;
|
||||
font-size: 36px;
|
||||
font-weight: 800;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.btn {
|
||||
white-space: nowrap;
|
||||
color: #1365DD;
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.num-content {
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
|
||||
.num-item {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 142px;
|
||||
padding-top: 20px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.content {
|
||||
width: 120px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 36px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
line-height: 42px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 26px;
|
||||
color: #666;
|
||||
line-height: 36px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.line-bg {
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
background: #F1F6F9;
|
||||
}
|
||||
|
||||
.list-content {
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
padding: 48px 2px 0 32px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.left {
|
||||
// width: calc(100% - 120px);
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
.item-content {
|
||||
width: 33%;
|
||||
padding-right: 32px;
|
||||
box-sizing: border-box;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 100%;
|
||||
height: 158px;
|
||||
background: #FAFBFF;
|
||||
border-radius: 1px;
|
||||
border: 1px solid #E7E7E7;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
margin: 0 32px 32px 0;
|
||||
|
||||
h2 {
|
||||
font-size: 38px;
|
||||
color: #5088FF;
|
||||
line-height: 44px;
|
||||
margin: 14px 0 26px 0;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 32px;
|
||||
color: #333;
|
||||
line-height: 44px;
|
||||
}
|
||||
}
|
||||
|
||||
.item:nth-of-type(2n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
.item {
|
||||
width: 120px;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
padding: 0 8px;
|
||||
background: #FAFBFF;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #E7E7E7;
|
||||
box-sizing: border-box;
|
||||
font-size: 30px;
|
||||
font-family: DINAlternate-Bold, DINAlternate;
|
||||
color: #787878;
|
||||
letter-spacing: -1px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.active {
|
||||
background: #5088FF;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #E7E7E7;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.popup {
|
||||
padding-left: 32px;
|
||||
|
||||
.bg {
|
||||
width: 64px;
|
||||
height: 10px;
|
||||
background: #CCC;
|
||||
border-radius: 6px;
|
||||
margin: 32px 0 32px 344px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 36px;
|
||||
font-family: PingFang-SC-Heavy, PingFang-SC;
|
||||
font-weight: 800;
|
||||
color: #333;
|
||||
line-height: 50px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.row-info {
|
||||
padding-bottom: 48px;
|
||||
|
||||
.row-item {
|
||||
display: inline-block;
|
||||
width: 33%;
|
||||
|
||||
h3 {
|
||||
font-size: 32px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #4E75FE;
|
||||
line-height: 64px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 28px;
|
||||
color: #666;
|
||||
line-height: 42px;
|
||||
}
|
||||
}
|
||||
|
||||
.left {
|
||||
width: calc(28% - 70px);
|
||||
text-align: center;
|
||||
margin-right: 70px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.center {
|
||||
width: 36%;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
|
||||
.left-line {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 0;
|
||||
height: 64px;
|
||||
border-left: 1px solid #E5E5E5;
|
||||
}
|
||||
|
||||
.right-line {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 0;
|
||||
height: 64px;
|
||||
border-left: 1px solid #E5E5E5;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
width: calc(33% - 40px);
|
||||
text-align: center;
|
||||
margin-left: 40px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.info-flex {
|
||||
display: flex;
|
||||
margin-bottom: 24px;
|
||||
padding-right: 70px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.item {
|
||||
flex: 1;
|
||||
font-size: 28px;
|
||||
color: #333;
|
||||
line-height: 30px;
|
||||
|
||||
.label {
|
||||
color: #999;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.value {
|
||||
display: inline-block;
|
||||
width: calc(100% - 120px);
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.line-bg {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
background: #F5F6FA;
|
||||
}
|
||||
|
||||
.pad-t32 {
|
||||
padding-top: 32px;
|
||||
}
|
||||
|
||||
.mar-t48 {
|
||||
margin-top: 48px;
|
||||
}
|
||||
|
||||
.pop-btn {
|
||||
width: 100%;
|
||||
height: 112px;
|
||||
line-height: 112px;
|
||||
text-align: center;
|
||||
font-size: 32px;
|
||||
font-weight: 500;
|
||||
color: #FFF;
|
||||
background: #1365DD;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.pad-b112 {
|
||||
padding-bottom: 112px;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .content {
|
||||
padding: 0 !important;
|
||||
}
|
||||
</style>
|
||||
191
src/project/saas/AppBuilding/list.vue
Normal file
191
src/project/saas/AppBuilding/list.vue
Normal file
@@ -0,0 +1,191 @@
|
||||
<template>
|
||||
<div class="list">
|
||||
<AiTopFixed>
|
||||
<u-search placeholder="小区名称" :show-action="false" v-model="title" @search="current=1,getList()"/>
|
||||
</AiTopFixed>
|
||||
<div class="list-content">
|
||||
<div class="item" v-for="(item, index) in list" :key="index">
|
||||
<div class="item-content" @click="toDetail(item.id)">
|
||||
<p class="title line-two">{{ item.communityName }}</p>
|
||||
<p class="address">{{ item.cellName }}</p>
|
||||
<span class="status" :class="'color'+item.locationStatus"
|
||||
v-text="$dict.getLabel('BuildLocationStatus', item.locationStatus)"/>
|
||||
</div>
|
||||
<div class="item-btn" v-if="item.locationStatus != 1" @click="toMap(item.id, item.areaId)">
|
||||
<span>去定位</span>
|
||||
</div>
|
||||
<div class="item-btn" v-if="item.locationStatus == 1" @click="toMap(item.id, item.areaId)">
|
||||
<span>重新定位</span>
|
||||
</div>
|
||||
</div>
|
||||
<AiEmpty v-if="!list.length"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState} from 'vuex'
|
||||
|
||||
export default {
|
||||
|
||||
data() {
|
||||
return {
|
||||
title: '',
|
||||
current: 1,
|
||||
list: [],
|
||||
isMore: false
|
||||
}
|
||||
},
|
||||
computed: {...mapState(['user'])},
|
||||
mounted() {
|
||||
this.$dict.load('BuildLocationStatus').then(() => {
|
||||
this.getList()
|
||||
})
|
||||
uni.$on('updateList', () => {
|
||||
this.current = 1
|
||||
this.getList()
|
||||
})
|
||||
},
|
||||
onShow() {
|
||||
document.title = "楼栋列表"
|
||||
},
|
||||
|
||||
methods: {
|
||||
getList() {
|
||||
this.$http.post(`/app/appcommunitybuildinginfo/list`, null, {
|
||||
params: {
|
||||
current: this.current,
|
||||
size: 10,
|
||||
communityName: this.title
|
||||
}
|
||||
}).then(res => {
|
||||
if (res?.data) {
|
||||
if (res.data.records.length < 10) {
|
||||
this.isMore = true
|
||||
}
|
||||
|
||||
res.data.records.forEach(e => {
|
||||
e.cellName = `${e.communityName + e.buildingNumber}栋`
|
||||
})
|
||||
if (this.current > 1 && this.current > res.data.pages) {
|
||||
return
|
||||
}
|
||||
this.list = this.current > 1 ? [...this.list, ...res.data.records] : res.data.records
|
||||
this.pages = res.data.pages
|
||||
}
|
||||
})
|
||||
},
|
||||
toDetail(id) {
|
||||
uni.navigateTo({url: `./detail?id=${id}`})
|
||||
},
|
||||
toMap(id, areaId) {
|
||||
uni.navigateTo({url: `./map?id=${id}&areaId=${areaId}`})
|
||||
}
|
||||
|
||||
},
|
||||
onReachBottom() {
|
||||
if (this.isMore) return
|
||||
|
||||
this.current++
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.getList()
|
||||
})
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.list {
|
||||
padding-bottom: 20px;
|
||||
.list-content {
|
||||
padding: 32px 32px 0;
|
||||
background-color: #F5F5F5;
|
||||
|
||||
.item {
|
||||
width: 100%;
|
||||
background: #FFF;
|
||||
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.02);
|
||||
border-radius: 8px;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin-bottom: 32px;
|
||||
|
||||
.item-content {
|
||||
padding: 32px 32px 42px 32px;
|
||||
}
|
||||
|
||||
.title {
|
||||
width: calc(100% - 60px);
|
||||
word-break: break-all;
|
||||
font-size: 32px;
|
||||
color: #333;
|
||||
line-height: 44px;
|
||||
}
|
||||
|
||||
.address {
|
||||
width: 100%;
|
||||
word-break: break-all;
|
||||
font-size: 28px;
|
||||
color: #999;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.status {
|
||||
width: 160px;
|
||||
height: 40px;
|
||||
line-height: 36px;
|
||||
font-size: 26px;
|
||||
font-weight: 500;
|
||||
position: absolute;
|
||||
right: -38px;
|
||||
top: 24px;
|
||||
-webkit-transform: rotate(90deg);
|
||||
transform: rotate(45deg);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.color0 {
|
||||
background: #FFECEF;
|
||||
color: #f46;
|
||||
}
|
||||
|
||||
.color1 {
|
||||
background: #EEF5FF;
|
||||
color: #5A98F2;
|
||||
}
|
||||
|
||||
.item-btn {
|
||||
width: 100%;
|
||||
padding: 20px 32px 20px 0;
|
||||
border-top: 1px solid #eee;
|
||||
text-align: right;
|
||||
box-sizing: border-box;
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 160px;
|
||||
height: 56px;
|
||||
line-height: 56px;
|
||||
text-align: center;
|
||||
border-radius: 28px;
|
||||
border: 1px solid #1365DD;
|
||||
font-size: 28px;
|
||||
color: #1365DD;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.line-two {
|
||||
text-overflow: -o-ellipsis-lastline;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
205
src/project/saas/AppBuilding/map.vue
Normal file
205
src/project/saas/AppBuilding/map.vue
Normal file
@@ -0,0 +1,205 @@
|
||||
<template>
|
||||
<div class="map">
|
||||
<!-- <div class="build-btn">
|
||||
<img src="./components/img/model-icon.png" alt="" @click="toDetail"> 楼栋<br/>模型
|
||||
</div> -->
|
||||
<!-- <div class="build-btn locate">
|
||||
<img src="https://cdn.cunwuyun.cn/dvcp/h5/Location2.png" alt="" @click="getLocale"/>
|
||||
当前<br>位置
|
||||
</div> -->
|
||||
<div class="map-content">
|
||||
<AiTMap :map.sync="map" :lib.sync="lib" :ops="ops" :libraries="['service', 'tools']"/>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="btn" @click="confirm">确认定位</div>
|
||||
</div>
|
||||
<!-- <u-popup v-model="show" mode="bottom" border-radius="14">
|
||||
<div class="popup">
|
||||
<div class="bg"></div>
|
||||
<div class="title">恒大城西社区居委会</div>
|
||||
<p class="address">山东省济南市历城区王舍人街道恒大商业广场蓝天新城</p>
|
||||
<div class="info-flex">
|
||||
<span class="label">所属社区</span>
|
||||
<span class="value">后西一街袁集村</span>
|
||||
</div>
|
||||
<div class="info-flex">
|
||||
<span class="label">所属小区</span>
|
||||
<span class="value">蓝天新城世纪花园</span>
|
||||
</div>
|
||||
<div class="info-flex">
|
||||
<span class="label">房屋类型</span>
|
||||
<span class="value">单元(公寓)楼</span>
|
||||
</div>
|
||||
<div class="info-flex">
|
||||
<span class="label">所属网格</span>
|
||||
<span class="value">蓝天新城基础网格一</span>
|
||||
</div>
|
||||
<div class="info-flex">
|
||||
<span class="label">网格管理员</span>
|
||||
<span class="value">林珊珊</span>
|
||||
</div>
|
||||
<div class="info-flex">
|
||||
<span class="label">楼栋长</span>
|
||||
<span class="value">林珊珊 13782951281
|
||||
<img :src="$cdn + 'common/phone.png'" alt="" @click="call(item)" class="phone-icon">
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="popup-btn">查看楼栋模型</div>
|
||||
</u-popup> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState} from 'vuex'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
ops: {},
|
||||
lib: null,
|
||||
map: null,
|
||||
markerLayer: '',
|
||||
isFlag: false,
|
||||
latLng: {lat: '', lng: ''},
|
||||
}
|
||||
},
|
||||
computed: {...mapState(['user'])},
|
||||
mounted() {
|
||||
this.initMap()
|
||||
},
|
||||
onShow() {
|
||||
document.title = "楼栋定位"
|
||||
},
|
||||
methods: {
|
||||
initMap(retryTimes = 0) { //初始化地图
|
||||
this.$nextTick(() => {
|
||||
let {map} = this
|
||||
if (map) {
|
||||
map.setZoom(15)
|
||||
map.on("click", (evt) => {
|
||||
this.handleMapClick(evt)
|
||||
});
|
||||
} else {
|
||||
if (retryTimes < 10)
|
||||
setTimeout(() => {
|
||||
this.initMap(++retryTimes)
|
||||
}, 500)
|
||||
else console.error("地图渲染失败")
|
||||
}
|
||||
})
|
||||
},
|
||||
getLocale() {
|
||||
wx.getLocation({
|
||||
type: 'gcj02',
|
||||
success: res => {
|
||||
let {latitude: lat, longitude: lng} = res
|
||||
this.handleMapClick({latlng: {lat, lng}})
|
||||
}
|
||||
})
|
||||
},
|
||||
handleMapClick(evt) {
|
||||
let {lib: TMap, map} = this
|
||||
if (this.markerLayer) {
|
||||
this.markerLayer.setMap(null);
|
||||
}
|
||||
this.markerLayer = new TMap.MultiMarker({id: 'marker-layer', map});
|
||||
this.markerLayer.add({
|
||||
position: evt.latLng
|
||||
});
|
||||
this.latLng = evt.latLng
|
||||
},
|
||||
confirm() {
|
||||
if (!this.latLng.lat) {
|
||||
return this.$u.toast(`未获取到定位信息，无法定位`)
|
||||
}
|
||||
let {id} = this.$route.query
|
||||
this.$http.post(`/app/appcommunitybuildinginfo/updateLocation`, null, {
|
||||
params: {id, ...this.latLng}
|
||||
}).then(res => {
|
||||
if (res?.code == 0) {
|
||||
this.$u.toast('提交成功')
|
||||
uni.$emit('updateList')
|
||||
setTimeout(() => {
|
||||
uni.navigateBack({})
|
||||
}, 600)
|
||||
}
|
||||
})
|
||||
},
|
||||
toDetail() {
|
||||
uni.navigateTo({url: `./detail?id=${this.$route.query.id}`})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
uni-page-body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.map {
|
||||
height: 100vh;
|
||||
|
||||
.build-btn {
|
||||
width: 80px;
|
||||
height: 160px;
|
||||
background: #FFF;
|
||||
box-shadow: 0 4px 8px 0 rgba(138, 138, 138, 0.5);
|
||||
border-radius: 8px;
|
||||
position: fixed;
|
||||
bottom: 136px;
|
||||
right: 24px;
|
||||
z-index: 99999;
|
||||
padding: 16px 16px 0;
|
||||
box-sizing: border-box;
|
||||
font-size: 24px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #666;
|
||||
line-height: 30px;
|
||||
|
||||
&.locate {
|
||||
transform: translateY(calc(-100% - 20px));
|
||||
}
|
||||
|
||||
img {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.map-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.footer {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 99999;
|
||||
display: flex;
|
||||
font-size: 32px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
height: 112px;
|
||||
line-height: 112px;
|
||||
text-align: center;
|
||||
|
||||
.click {
|
||||
flex: 1;
|
||||
color: #333;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.btn {
|
||||
flex: 2;
|
||||
background: #1365DD;
|
||||
color: #FFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
105
src/project/saas/AppConflictMediation/AppConflictMediation.vue
Normal file
105
src/project/saas/AppConflictMediation/AppConflictMediation.vue
Normal file
@@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<div class="AppHandSnapshot">
|
||||
<component v-if="refresh && isGridMember" :is="component" @change="onChange" :params="params"> </component>
|
||||
<div v-if="!isGridMember" class="empty">
|
||||
<img src="./components/img/no-admin.png" alt="">
|
||||
<p>没有网格员权限<br />无法查看矛盾调解信息哦~</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import List from './List.vue'
|
||||
import {mapState} from "vuex";
|
||||
|
||||
export default {
|
||||
name: 'AppConflictMediation',
|
||||
appName: '矛盾调解',
|
||||
data() {
|
||||
return {
|
||||
component: 'List',
|
||||
params: {},
|
||||
refresh: true,
|
||||
tabIndex: 0,
|
||||
isTab: true,
|
||||
}
|
||||
},
|
||||
components: {List},
|
||||
computed:{
|
||||
...mapState(['user']),
|
||||
isGridMember() {
|
||||
return this.user.girdCheckType > 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onChange(e) {
|
||||
this.params = e.params
|
||||
this.component = e.type
|
||||
},
|
||||
},
|
||||
onShow() {
|
||||
document.title = '矛盾调解'
|
||||
uni.$on('hideTab', () => {
|
||||
this.isTab = false
|
||||
})
|
||||
uni.$on('showTab', () => {
|
||||
this.isTab = true
|
||||
})
|
||||
|
||||
},
|
||||
onReachBottom() {
|
||||
if(!this.tabIndex) {
|
||||
uni.$emit('nextList')
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.AppConflictMediation {
|
||||
height: 100%;
|
||||
}
|
||||
.tabs {
|
||||
width: 100%;
|
||||
height: 98px;
|
||||
background: #fff;
|
||||
border-top: 1px solid #ddd;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
.item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
img {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
p {
|
||||
font-size: 22px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #c4cad4;
|
||||
line-height: 8px;
|
||||
}
|
||||
.color-3267F0 {
|
||||
color: #3267f0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.empty{
|
||||
text-align: center;
|
||||
img{
|
||||
width: 282px;
|
||||
height: 306px;
|
||||
margin: 136px auto 0;
|
||||
}
|
||||
p{
|
||||
font-size: 28px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #999;
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
260
src/project/saas/AppConflictMediation/Content.vue
Normal file
260
src/project/saas/AppConflictMediation/Content.vue
Normal file
@@ -0,0 +1,260 @@
|
||||
<template>
|
||||
<div class="Transfer">
|
||||
<div class="contents">
|
||||
<u-form :model="forms" ref="uForm" label-width="auto" :border-bottom="false">
|
||||
<u-form-item label="转交给" prop="status" required :border-bottom="false" class="first-form" v-if="status == 4">
|
||||
<div flex class="flexEnd">
|
||||
<AiPagePicker type="custom" :id="selectObject.id" @select="handleSelectObject"
|
||||
:ops="{url:'../AppGridManagement/selectGridMember',label: 'name'}">
|
||||
<template v-if="isSelectGridMember">
|
||||
<AiOpenData type="userName" :openid="forms.name"/>
|
||||
<u-icon name="arrow-right" color="#ddd"/>
|
||||
</template>
|
||||
<AiMore v-else v-model="forms.name"/>
|
||||
</AiPagePicker>
|
||||
</div>
|
||||
</u-form-item>
|
||||
<u-form-item label="事件分类" prop="groupName" required :border-bottom="false" right-icon="arrow-right"
|
||||
v-if="status== 2">
|
||||
|
||||
<span @click="show = true" class="right-span"
|
||||
:style="forms.groupName ? '' : 'color:#999;'">{{ forms.groupName || '请选择事件分类' }}</span>
|
||||
|
||||
<u-select v-model="show" :list="myList" value-name="id" label-name="groupName"
|
||||
@confirm="selectStatus"></u-select>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item :label="status == 2 ? '办结意见':'办理意见'" prop="content" required :border-bottom="false"
|
||||
label-position="top" class="contents">
|
||||
<u-input v-model="forms.content" :placeholder="status == 2 ? '请写下你的办结意见…' : '请写下你的办理意见...'" type="textarea"
|
||||
auto-height height="100" maxlength="200"/>
|
||||
</u-form-item>
|
||||
|
||||
<div class="limit">{{ forms.content.length }}/200</div>
|
||||
|
||||
<div class="line"></div>
|
||||
|
||||
<u-form-item label="图片上传(最多9张)" prop="files" :border-bottom="false" class="avatars" label-position="top">
|
||||
<AiUploader :def.sync="forms.files" multiple placeholder="上传图片" :limit="9"
|
||||
action="/admin/file/add2"></AiUploader>
|
||||
</u-form-item>
|
||||
|
||||
</u-form>
|
||||
</div>
|
||||
|
||||
<div class="btn" v-if="status == 4" @click="confirm">
|
||||
<span>转交事件</span>
|
||||
</div>
|
||||
|
||||
<div class="btn" v-if="status == 2" @click="confirm">
|
||||
<span>确定</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'Content',
|
||||
components: {},
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
forms: {
|
||||
groupName: '',
|
||||
groupId: '',
|
||||
content: '',
|
||||
files: [],
|
||||
name: ''
|
||||
},
|
||||
flag: false,
|
||||
show: false,
|
||||
status: '', //4转交 2我已办结
|
||||
myList: [],
|
||||
id: '',
|
||||
selectObject: {},
|
||||
titleList: ['', '', '事件处理', '', '事件转交'],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isSelectGridMember() {
|
||||
return this.selectObject.kind == "user"
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
this.status = option.status
|
||||
this.id = option.id
|
||||
this.forms.groupId = option.groupId
|
||||
this.forms.groupName = option.groupName
|
||||
this.typeList()
|
||||
},
|
||||
onShow() {
|
||||
document.title = this.titleList[this.status]
|
||||
},
|
||||
methods: {
|
||||
typeList() {
|
||||
this.$http.post(`/app/appclapeventgroup/list`, null, {
|
||||
params: {
|
||||
size: 9999,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.myList = res.data.records
|
||||
this.$forceUpdate()
|
||||
}
|
||||
})
|
||||
},
|
||||
confirm() {
|
||||
if (this.status == 4 && !this.forms.name) {
|
||||
return this.$u.toast('请选择转交对象')
|
||||
}
|
||||
if (this.status != 4 && !this.forms.groupName) {
|
||||
return this.$u.toast('请选择分类')
|
||||
}
|
||||
if (this.status != 4 && !this.forms.content) {
|
||||
return this.$u.toast('请输入意见')
|
||||
}
|
||||
this.submit()
|
||||
},
|
||||
submit() { //status 4转交 2我已办结
|
||||
var url = '', successText = '', params = ''
|
||||
if (this.status == 4) {
|
||||
url = `/app/appclapeventinfo/transfer`
|
||||
successText = '转交成功'
|
||||
params = {
|
||||
...this.forms,
|
||||
girdId: this.selectObject.id,
|
||||
girdName: this.selectObject.girdName,
|
||||
}
|
||||
if (this.isSelectGridMember) { //选择的网格员
|
||||
params.girdId = this.selectObject.girdId
|
||||
params.girdMemberId = this.selectObject.wxUserId
|
||||
params.girdMemberName = this.selectObject.name
|
||||
}
|
||||
}
|
||||
if (this.status == 2) {
|
||||
url = `/app/appclapeventinfo/finishByGirdMember`
|
||||
successText = '办结成功'
|
||||
params = {...this.forms}
|
||||
}
|
||||
params.id = this.id
|
||||
this.$http.post(url, form).then((res) => {
|
||||
if (res?.code == 0) {
|
||||
this.$u.toast(successText)
|
||||
uni.$emit('update')
|
||||
setTimeout(() => {
|
||||
uni.navigateBack({delta: 2})
|
||||
}, 600)
|
||||
}
|
||||
})
|
||||
},
|
||||
selectStatus(e) {
|
||||
this.forms.groupName = e[0].label
|
||||
this.forms.groupId = e[0].value
|
||||
},
|
||||
handleSelectObject(obj) {
|
||||
this.selectObject = obj
|
||||
this.forms.name = obj.name || obj.girdName
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.Transfer {
|
||||
height: 100%;
|
||||
|
||||
.contents {
|
||||
padding-bottom: 140px;
|
||||
|
||||
::v-deep .u-form {
|
||||
.u-form-item {
|
||||
padding: 0 45px !important;
|
||||
|
||||
.u-form-item__body {
|
||||
.u-form-item--right__content__slot {
|
||||
padding-bottom: 0;
|
||||
|
||||
.u-input {
|
||||
text-align: right !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.u-form-item:first-child {
|
||||
.u-form-item__body {
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
}
|
||||
|
||||
.line {
|
||||
height: 24px;
|
||||
background: #f3f6f9;
|
||||
}
|
||||
|
||||
.contents {
|
||||
padding-bottom: 20px !important;
|
||||
|
||||
.u-form-item__body {
|
||||
.u-form-item--right__content__slot {
|
||||
.u-input {
|
||||
text-align: left !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.avatars {
|
||||
padding-bottom: 20px !important;
|
||||
|
||||
.u-form-item__body {
|
||||
.default {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.limit {
|
||||
text-align: right !important;
|
||||
font-size: 28px;
|
||||
background: #FFFFFF;
|
||||
padding-right: 44px;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
// ::v-deep u-input {
|
||||
// border-bottom: none;
|
||||
// }
|
||||
|
||||
.btn {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
background: #3975c6;
|
||||
padding: 34px 0;
|
||||
text-align: center;
|
||||
font-size: 32px;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.right-span {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.flexEnd {
|
||||
width: 100%;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
385
src/project/saas/AppConflictMediation/List.vue
Normal file
385
src/project/saas/AppConflictMediation/List.vue
Normal file
@@ -0,0 +1,385 @@
|
||||
<template>
|
||||
<div class="list">
|
||||
<!-- 统计 -->
|
||||
<div class="content-box">
|
||||
<div class="content-list">
|
||||
<div class="list-item" v-for="(item, index) in staticName" :key="index">
|
||||
<h3>{{ item.value }}</h3>
|
||||
<p>{{ item.label }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 事件列表 -->
|
||||
<div class="title">
|
||||
<div class="title-name">事件列表</div>
|
||||
<div class="title-type" @click="showGird = true">{{ status ? status : '全部类型' }}<u-icon name="arrow-down"></u-icon></div>
|
||||
</div>
|
||||
|
||||
<template>
|
||||
<AiCard v-for="(item, i) in datas" :key="i" @click.native="goDetail(item, 1)">
|
||||
<template #custom>
|
||||
<div class="card-top">
|
||||
<div class="titles">{{ item.content }}</div>
|
||||
|
||||
<div class="types">
|
||||
<div class="label label1">事件类型</div>
|
||||
<div class="types-right">{{ item.groupName }}</div>
|
||||
</div>
|
||||
|
||||
<div class="gards gird">
|
||||
<div class="label">所属网格</div>
|
||||
<div class="gards-right">{{ item.girdName }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="status" :class="item.eventStatus == 0 ? 'status0' : 'status2'" v-if="item.eventStatus">
|
||||
<span class="icon"></span>
|
||||
<span>
|
||||
{{ $dict.getLabel('clapEventStatus', item.eventStatus) }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</AiCard>
|
||||
|
||||
<div class="addbtn">
|
||||
<div class="myreport" @click="linkTo('./myReply')">我的上报</div>
|
||||
|
||||
<div class="add" @click="addEvent">新增事件</div>
|
||||
</div>
|
||||
|
||||
<AiEmpty v-if="!datas.length"></AiEmpty>
|
||||
</template>
|
||||
|
||||
<u-select v-model="showGird" :list="$dict.getDict('clapEventStatusAll')" label-name="dictName" value-name="dictValue" @confirm="changeType" />
|
||||
|
||||
<div class="pad-b120" v-if="datas.length"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
export default {
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
datas: [],
|
||||
currentTabs: 0,
|
||||
current: 1,
|
||||
pages: 0,
|
||||
show: false,
|
||||
girdId: '',
|
||||
groupName: '',
|
||||
girdNameText: '所属网格',
|
||||
showType: false,
|
||||
listType: [],
|
||||
status: '',
|
||||
eventStatus: '',
|
||||
eventStatusText: '办件状态',
|
||||
listTypeHistory: [],
|
||||
listTypeAll: [],
|
||||
groupType: [],
|
||||
showGird: false,
|
||||
staticName: [
|
||||
{
|
||||
label: '待处理',
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
label: '上报数',
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
label: '已办数',
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
label: '今日办结',
|
||||
value: 0,
|
||||
},
|
||||
],
|
||||
statisticsList: [],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
|
||||
loadmore() {
|
||||
return this.pages <= this.current ? 'loading ' : 'nomore'
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.current = 1
|
||||
this.getList()
|
||||
this.getStaticList()
|
||||
uni.$on('update', () => {
|
||||
this.current = 1
|
||||
this.getList()
|
||||
this.getStaticList()
|
||||
})
|
||||
},
|
||||
onShow() {
|
||||
document.title = '矛盾调解'
|
||||
},
|
||||
created() {
|
||||
this.$dict.load('clapEventStatus', 'clapEventStatusAll', 'clapEventStatusHistory').then(() => {
|
||||
this.getList()
|
||||
this.getStaticList()
|
||||
this.listTypeAll = this.$dict.getDict('clapEventStatusAll')
|
||||
this.listTypeHistory = this.$dict.getDict('clapEventStatusHistory')
|
||||
this.listType = this.listTypeAll
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
this.$http
|
||||
.post(`/app/appclapeventinfo/listByGirdMember`, null, {
|
||||
params: {
|
||||
size: 10,
|
||||
current: this.current,
|
||||
searchType: this.currentTabs == 1 ? '1' : '0',
|
||||
eventStatus: this.eventStatus,
|
||||
girdId: this.girdId,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
if (res?.data) {
|
||||
this.datas = this.current > 1 ? [...this.datas, ...res.data.records] : res.data.records
|
||||
this.pages = res.data.pages
|
||||
this.$forceUpdate()
|
||||
}
|
||||
})
|
||||
},
|
||||
getStaticList() {
|
||||
this.$http.post('/app/appclapeventinfo/clapEventStatisticByGirdMember').then((res) => {
|
||||
if (res?.data) {
|
||||
Object.keys(res.data).forEach(() => {
|
||||
this.staticName[0].value = res.data['待处理']
|
||||
this.staticName[1].value = res.data['上报数']
|
||||
this.staticName[2].value = res.data['已办数']
|
||||
this.staticName[3].value = res.data['今日办结']
|
||||
})
|
||||
this.$forceUpdate()
|
||||
}
|
||||
})
|
||||
},
|
||||
// 切换类型
|
||||
changeType(e) {
|
||||
this.status = e[0].label
|
||||
this.eventStatus = e[0].value
|
||||
this.current = 1
|
||||
this.datas = []
|
||||
this.getList()
|
||||
},
|
||||
|
||||
// 新增事件
|
||||
addEvent() {
|
||||
uni.navigateTo({ url: './add' })
|
||||
},
|
||||
|
||||
goDetail(item) {
|
||||
uni.navigateTo({ url: `./detail?id=${item.id}` })
|
||||
},
|
||||
|
||||
change(index) {
|
||||
this.current = 1
|
||||
this.datas = []
|
||||
this.eventStatus = ''
|
||||
this.girdId = ''
|
||||
this.girdNameText = '所属网格'
|
||||
this.eventStatusText = '办件状态'
|
||||
this.currentTabs = index
|
||||
if (index == 0) {
|
||||
this.listType = this.listTypeAll
|
||||
} else {
|
||||
this.listType = this.listTypeHistory
|
||||
}
|
||||
this.getList()
|
||||
},
|
||||
|
||||
linkTo(url) {
|
||||
uni.navigateTo({ url })
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
uni-page-body {
|
||||
height: 100%;
|
||||
}
|
||||
.list {
|
||||
height: 100%;
|
||||
|
||||
.content-box {
|
||||
padding: 32px 30px 0px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.content-list {
|
||||
display: flex;
|
||||
background: #ffffff;
|
||||
border-radius: 16px;
|
||||
margin-bottom: 20px;
|
||||
width: 100%;
|
||||
height: 240px;
|
||||
|
||||
.list-item {
|
||||
width: 25%;
|
||||
height: 80px;
|
||||
text-align: center;
|
||||
padding-top: 50px;
|
||||
box-sizing: border-box;
|
||||
|
||||
h3 {
|
||||
font-size: 64px;
|
||||
color: #1e88e8;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 28px;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
padding: 0 30px;
|
||||
.title-name {
|
||||
font-size: 38px;
|
||||
color: #333333;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.title-type {
|
||||
font-size: 26px;
|
||||
color: #666666;
|
||||
padding-left: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .AiTopFixed .content {
|
||||
padding: 0;
|
||||
}
|
||||
::v-deep .AiCard {
|
||||
background: #f3f6f9;
|
||||
padding: 24px 30px 0;
|
||||
|
||||
.start {
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
|
||||
.card-top {
|
||||
padding: 32px;
|
||||
.titles {
|
||||
margin-bottom: 34px;
|
||||
font-size: 32px;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
line-height: 1.4;
|
||||
word-break: break-all;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.types,
|
||||
.gards {
|
||||
display: flex;
|
||||
margin-top: 8px;
|
||||
font-size: 26px;
|
||||
width: 100%;
|
||||
.types-right,
|
||||
.gards-right {
|
||||
width: calc(100% - 120px);
|
||||
color: #333333;
|
||||
}
|
||||
.label1 {
|
||||
width: 120px;
|
||||
}
|
||||
.label {
|
||||
width: 120px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status {
|
||||
padding: 32px;
|
||||
border-top: 1px solid #dddddd;
|
||||
.icon {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
vertical-align: middle;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.status0 {
|
||||
color: #ff883c;
|
||||
.icon {
|
||||
background: #ff883c;
|
||||
}
|
||||
}
|
||||
|
||||
.status1 {
|
||||
color: #1aaaff;
|
||||
.icon {
|
||||
background: #1aaaff;
|
||||
}
|
||||
}
|
||||
|
||||
.status2 {
|
||||
color: #42d784;
|
||||
.icon {
|
||||
background: #42d784;
|
||||
}
|
||||
}
|
||||
|
||||
.status3 {
|
||||
color: #ff4466;
|
||||
.icon {
|
||||
background: #ff4466;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.addbtn {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
line-height: 120px;
|
||||
text-align: center;
|
||||
font-size: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-shadow: inset 0px 1px 0px 0px #dddddd;
|
||||
z-index: 999;
|
||||
.myreport {
|
||||
background-color: #ffffff;
|
||||
width: 40%;
|
||||
color: #333;
|
||||
}
|
||||
.add {
|
||||
background-color: #3975c6;
|
||||
width: 60%;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.pad-b120 {
|
||||
background-color: #f3f6f9;
|
||||
padding-bottom: 140px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
207
src/project/saas/AppConflictMediation/PercentageDetail.vue
Normal file
207
src/project/saas/AppConflictMediation/PercentageDetail.vue
Normal file
@@ -0,0 +1,207 @@
|
||||
<template>
|
||||
<div class="PercentageDetail">
|
||||
<div class="header">
|
||||
<div class="left">
|
||||
<h2>小区管理</h2>
|
||||
<p>共21条，已办结18条</p>
|
||||
</div>
|
||||
<div class="right">
|
||||
<h4>86%</h4>
|
||||
<p>办结率</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-content">
|
||||
<div class="title">分类统计</div>
|
||||
<div class="percentage">
|
||||
<div class="item">
|
||||
<div class="mini-title">小区管理</div>
|
||||
<div class="info">
|
||||
<div class="line-bg"><div class="active-bg"></div></div>共11条 | 已办结9
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="mini-title">小区管理</div>
|
||||
<div class="info">
|
||||
<div class="line-bg" style="width:44%;"><div class="active-bg"></div></div>共11条 | 已办结9
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="mini-title">小区管理</div>
|
||||
<div class="info">
|
||||
<div class="line-bg" style="width:30%;"><div class="active-bg"></div></div>共11条 | 已办结9
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
contents: [
|
||||
{
|
||||
label: '待受理',
|
||||
num: 5
|
||||
},
|
||||
{
|
||||
label: '办理中',
|
||||
num: 5
|
||||
},
|
||||
{
|
||||
label: '今日上报',
|
||||
num: 5
|
||||
},
|
||||
{
|
||||
label: '今日办结',
|
||||
num: 5
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
this.$http
|
||||
.post('/app/appvisitvondolence/list', null, {
|
||||
params: {
|
||||
size: this.size,
|
||||
current: this.current,
|
||||
createUserId: this.currentTabs == 1 ? this.user.id : '',
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.datas = this.current > 1 ? [...this.datas, ...res.data.records] : res.data.records
|
||||
this.pages = res.data.pages
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
goDetail(item) {
|
||||
uni.navigateTo({ url: `./Detail?id=${item.id}` })
|
||||
},
|
||||
|
||||
change(index) {
|
||||
this.currentTabs = index
|
||||
this.getList()
|
||||
},
|
||||
},
|
||||
onReachBottom() {
|
||||
this.current = this.current + 1
|
||||
this.getList()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.PercentageDetail {
|
||||
background-color: #F3F7F8;
|
||||
padding: 32px 30px 0;
|
||||
.header{
|
||||
width: 100%;
|
||||
background: #FFF;
|
||||
border-radius: 16px;
|
||||
margin-bottom: 30px;
|
||||
display: flex;
|
||||
padding: 32px 32px 38px 24px;
|
||||
box-sizing: border-box;
|
||||
.left{
|
||||
width: calc(100% - 112px);
|
||||
h2{
|
||||
font-size: 42px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #333;
|
||||
line-height: 48px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
p{
|
||||
font-size: 30px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #999;
|
||||
line-height: 42px;
|
||||
}
|
||||
}
|
||||
.right{
|
||||
width: 112px;
|
||||
background: #E6FFF1;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
color: #42D784;
|
||||
h4{
|
||||
font-size: 36px;
|
||||
font-family: DINAlternate-Bold, DINAlternate;
|
||||
font-weight: bold;
|
||||
line-height: 42px;
|
||||
padding: 8px 0 4px 0;
|
||||
}
|
||||
p{
|
||||
font-size: 24px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
line-height: 34px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.info-content{
|
||||
width: 100%;
|
||||
background: #FFF;
|
||||
border-radius: 16px;
|
||||
margin-bottom: 24px;
|
||||
.title{
|
||||
font-size: 32px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #333;
|
||||
line-height: 48px;
|
||||
padding: 24px 16px 24px 24px;
|
||||
img{
|
||||
float: right;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
.percentage{
|
||||
padding: 16px 0 0 26px;
|
||||
.item{
|
||||
width: 100%;
|
||||
padding-bottom: 32px;
|
||||
.mini-title{
|
||||
font-size: 30px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #333;
|
||||
line-height: 48px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.info{
|
||||
width: 100%;
|
||||
font-size: 28px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #999;
|
||||
line-height: 48px;
|
||||
.line-bg{
|
||||
display: inline-block;
|
||||
width: 56%;
|
||||
height: 14px;
|
||||
background: #D7D8D9;
|
||||
border-radius: 8px;
|
||||
margin-right: 12px;
|
||||
.active-bg{
|
||||
width: 80%;
|
||||
height: 100%;
|
||||
background: #257FF1;
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
img{
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
345
src/project/saas/AppConflictMediation/SelectUser.vue
Normal file
345
src/project/saas/AppConflictMediation/SelectUser.vue
Normal file
@@ -0,0 +1,345 @@
|
||||
<template>
|
||||
<div class="SelectUser">
|
||||
<div class="header-middle">
|
||||
<div class="hint">
|
||||
<span v-for="(item, index) in slectList" :key="index"><span v-if="index" style="margin:0 4px;">/</span><span
|
||||
style="color:#3F8DF5" @click="girdNameClick(item, index)">{{ item.girdName }}</span></span>
|
||||
</div>
|
||||
|
||||
<div class="showTypes" v-if="!userList.length">
|
||||
<div v-if="treeList.length > 0">
|
||||
<div class="cards" v-for="(item, index) in treeList" :key="index" @click="itemClick(item)">
|
||||
<div class="imges">
|
||||
<img src="./components/img/xzh.png" alt="" class="imgselect" v-if="item.isChecked"
|
||||
@click.stop="girdClick(item, index)"/>
|
||||
<img src="./components/img/xz.png" alt="" class="imgselect" v-else
|
||||
@click.stop="girdClick(item, index)"/>
|
||||
<img src="./components/img/gird--select-icon.png" alt="" class="avatras"/>
|
||||
</div>
|
||||
<div class="rightes">
|
||||
<div class="applicationNames">{{ item.girdName }}</div>
|
||||
<img src="./components/img/right-icon.png" alt="" class="imgs"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<AiEmpty description="暂无数据" class="emptyWrap" v-else></AiEmpty>
|
||||
</div>
|
||||
|
||||
<div class="showUsers" v-else>
|
||||
<div v-if="userList.length > 0">
|
||||
<div class="cards" v-for="(e, index) in userList" :key="index">
|
||||
<div class="imges">
|
||||
<img src="./components/img/xzh.png" alt="" class="imgselect" v-if="e.isChecked"
|
||||
@click="userClick(e, index)"/>
|
||||
<img src="./components/img/xz.png" alt="" class="imgselect" v-else @click="userClick(e, index)"/>
|
||||
|
||||
<img src="./components/img/tx@2x.png" alt="" class="avatras"/>
|
||||
</div>
|
||||
|
||||
<div class="rights">
|
||||
<div class="applicationNames">
|
||||
<AiOpenData v-if="e.name" type="userName" :openid="e.name" style="display: block;"/>
|
||||
</div>
|
||||
<div class="idNumbers">{{ e.phone }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<AiEmpty description="暂无数据" class="emptyWrap" v-else></AiEmpty>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="subBtn" @click="submit">
|
||||
<div>确定选择</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'SelectUser',
|
||||
data() {
|
||||
return {
|
||||
selectUser: {},
|
||||
allData: null,
|
||||
treeList: [],
|
||||
slectList: [],
|
||||
userList: [],
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.selectUser.id = this.$route.query.id
|
||||
this.getTree()
|
||||
},
|
||||
onShow() {
|
||||
document.title = '选择人员'
|
||||
},
|
||||
methods: {
|
||||
getTree() {
|
||||
this.slectList = []
|
||||
this.$http.post('/app/appgirdinfo/listAllByTop').then((res) => {
|
||||
if (res?.data) {
|
||||
this.allData = res.data
|
||||
this.treeInit()
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
treeInit() {
|
||||
this.treeList = this.allData.girdList
|
||||
let obj = {
|
||||
girdName: this.allData.girdName,
|
||||
id: this.allData.id,
|
||||
}
|
||||
this.slectList.push(obj)
|
||||
},
|
||||
|
||||
itemClick(row) {
|
||||
var obj = {
|
||||
girdName: row.girdName,
|
||||
id: row.id,
|
||||
}
|
||||
this.slectList.push(obj)
|
||||
this.searckGird(row)
|
||||
},
|
||||
|
||||
searckGird(row) {
|
||||
this.treeList = []
|
||||
this.$http.post(`/app/appgirdinfo/list?parentGirdId=${row.id}&size=999`).then((res) => {
|
||||
if (res?.data) {
|
||||
this.treeList = res.data.records.map(e => ({...e, isChecked: e.id == this.selectUser.id}))
|
||||
}
|
||||
})
|
||||
this.userList = []
|
||||
this.$http.post(`/app/appgirdmemberinfo/listByGirdIdByThree?girdId=${row.id}`).then((res) => {
|
||||
if (res?.data) {
|
||||
this.userList = res.data
|
||||
this.userList.map((item) => {
|
||||
item.isChecked = item.id == this.selectUser.id
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
girdNameClick(row, index) {
|
||||
this.userList = []
|
||||
if (!index) { //第一级别
|
||||
this.slectList = []
|
||||
this.treeInit()
|
||||
} else {
|
||||
var list = []
|
||||
this.slectList.map((item, i) => {
|
||||
if (i <= index) {
|
||||
list.push(item)
|
||||
}
|
||||
})
|
||||
this.slectList = list
|
||||
this.searckGird(row)
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
girdClick(row, index) {
|
||||
if (this.treeList[index].isChecked) {//取消
|
||||
this.treeList[index].isChecked = false
|
||||
this.selectUser = {}
|
||||
} else {
|
||||
this.treeList.map((item, i) => {
|
||||
item.isChecked = index == i
|
||||
})
|
||||
this.selectUser = row
|
||||
}
|
||||
this.$forceUpdate()
|
||||
},
|
||||
|
||||
userClick(row, index) {
|
||||
if (this.userList[index].isChecked) {//取消
|
||||
this.userList[index].isChecked = false
|
||||
this.selectUser = {}
|
||||
} else {
|
||||
this.userList.map((item, i) => {
|
||||
item.isChecked = index == i
|
||||
})
|
||||
this.selectUser = row
|
||||
}
|
||||
this.$forceUpdate()
|
||||
},
|
||||
|
||||
submit() {
|
||||
if (this.selectUser.id != null) {
|
||||
uni.$emit('goback', this.selectUser)
|
||||
uni.navigateBack({})
|
||||
} else {
|
||||
return this.$u.toast('请选择网格或网格员')
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.SelectUser {
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
|
||||
.header-top {
|
||||
background: #fff;
|
||||
padding: 20px 32px;
|
||||
}
|
||||
|
||||
.header-middle {
|
||||
padding-bottom: 140px;
|
||||
|
||||
.hint {
|
||||
padding: 28px 20px 28px 32px;
|
||||
line-height: 56px;
|
||||
box-shadow: 0 1px 0 0 #e4e5e6;
|
||||
font-size: 30px;
|
||||
font-weight: 500;
|
||||
// word-break: break-all;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.showTypes {
|
||||
.empty-div {
|
||||
height: 16px;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 120px;
|
||||
line-height: 120px;
|
||||
padding: 0 0 0 32px;
|
||||
|
||||
.imges {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.imgselect {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.avatras {
|
||||
width: 74px;
|
||||
height: 74px;
|
||||
border-radius: 8px;
|
||||
margin-left: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
width: 74px;
|
||||
height: 74px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.rightes {
|
||||
width: calc(100% - 160px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 32px;
|
||||
border-bottom: 1px solid #e4e5e6;
|
||||
|
||||
.applicationNames {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
font-size: 36px;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.imgs {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.showUsers {
|
||||
.cards {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 120px;
|
||||
line-height: 120px;
|
||||
padding: 0 0 0 32px;
|
||||
|
||||
.imges {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 200px;
|
||||
|
||||
.imgselect {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.avatras {
|
||||
width: 74px;
|
||||
height: 74px;
|
||||
border-radius: 8px;
|
||||
margin-left: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
.rights {
|
||||
width: 70%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-left: 32px;
|
||||
border-bottom: 1px solid #e4e5e6;
|
||||
padding-right: 40px;
|
||||
|
||||
.applicationNames {
|
||||
font-size: 36px;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.idNumbers {
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.subBtn {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 118px;
|
||||
background: #f4f8fb;
|
||||
|
||||
div {
|
||||
width: 192px;
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
text-align: center;
|
||||
background: #1365dd;
|
||||
border-radius: 4px;
|
||||
font-size: 32px;
|
||||
color: #fff;
|
||||
margin: 20px 34px 0 0;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
76
src/project/saas/AppConflictMediation/Set.vue
Normal file
76
src/project/saas/AppConflictMediation/Set.vue
Normal file
@@ -0,0 +1,76 @@
|
||||
<template>
|
||||
<div class="set">
|
||||
<div class="info-content" @click="toSetList">
|
||||
<img src="./components/img/setting-icon.png" alt="" class="set-icon">
|
||||
<div class="info">
|
||||
<h2>配置事件类别</h2>
|
||||
<p>提交上报时选择事件类别，有助于管理上报和统计分析</p>
|
||||
</div>
|
||||
<img src="./components/img/right-icon.png" alt="" class="right-icon">
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toSetList() {
|
||||
uni.navigateTo({url: './SetList'})
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
uni-page-body {
|
||||
height: 100%;
|
||||
}
|
||||
.set {
|
||||
height: 100%;
|
||||
padding: 32px 30px 0;
|
||||
box-sizing: border-box;
|
||||
background-color: #F3F7F8;
|
||||
.info-content{
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
padding: 40px 8px 34px 40px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
.set-icon{
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-right: 44px;
|
||||
}
|
||||
.info{
|
||||
display: inline-block;
|
||||
width: calc(100% - 216px);
|
||||
h2{
|
||||
font-size: 36px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #333;
|
||||
line-height: 48px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
p{
|
||||
width: 100%;
|
||||
font-size: 28px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #999;
|
||||
line-height: 40px;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
.right-icon{
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
margin-left: 76px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
122
src/project/saas/AppConflictMediation/SetList.vue
Normal file
122
src/project/saas/AppConflictMediation/SetList.vue
Normal file
@@ -0,0 +1,122 @@
|
||||
<template>
|
||||
<div class="SetList">
|
||||
<div class="header">
|
||||
<div class="title">事件类别</div>
|
||||
<p>成员上报时需要选择事件类别，上报会按照分类进行统计。</p>
|
||||
</div>
|
||||
<div class="set-list">
|
||||
<div class="item">
|
||||
<div class="title">小区管理</div>
|
||||
<div class="tips-list">
|
||||
<span class="tips">公共部位设置地桩锁</span>
|
||||
<span class="tips">公共部位桩锁</span>
|
||||
<span class="tips">地桩锁</span>
|
||||
<span class="tips">公共部位设置地桩锁</span>
|
||||
<span class="tips">公共部位桩锁</span>
|
||||
<span class="tips">地桩锁</span>
|
||||
<span class="tips">公共部位设置地桩锁</span>
|
||||
<span class="tips">公共部位桩锁</span>
|
||||
<span class="tips">地桩锁</span>
|
||||
</div>
|
||||
<img src="./components/img/right-icon.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn" @click="toAddSet">新建分类</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'SetList',
|
||||
components: {},
|
||||
props: {
|
||||
dict: Object,
|
||||
instance: Function,
|
||||
params: Object,
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
toAddSet() {
|
||||
uni.navigateTo({url: './AddSet'})
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.SetList {
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
.header{
|
||||
padding: 40px 30px 74px;
|
||||
.title{
|
||||
font-size: 42px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #333;
|
||||
line-height: 48px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
p{
|
||||
width: 100%;
|
||||
font-size: 30px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #999;
|
||||
line-height: 42px;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
.set-list{
|
||||
padding: 0 28px 120px;
|
||||
.item{
|
||||
width: 100%;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px solid #E9EAEB;
|
||||
position: relative;
|
||||
.title{
|
||||
font-size: 34px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #333;
|
||||
line-height: 48px;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
.tips-list{
|
||||
width: calc(100% - 68px);
|
||||
}
|
||||
.tips{
|
||||
display: inline-block;
|
||||
line-height: 64px;
|
||||
background: #F7F8F9;
|
||||
border-radius: 8px;
|
||||
padding: 0 20px;
|
||||
font-size: 30px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #999;
|
||||
margin: 0 16px 24px 0;
|
||||
}
|
||||
img{
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn{
|
||||
width: 100%;
|
||||
line-height: 112px;
|
||||
background: #3975C6;
|
||||
box-shadow: inset 0px 1px 0px 0px #EEEEEE;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
text-align: center;
|
||||
font-size: 32px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #FFF;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
60
src/project/saas/AppConflictMediation/UserList.vue
Normal file
60
src/project/saas/AppConflictMediation/UserList.vue
Normal file
@@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<div class="UserList">
|
||||
<div class="item">
|
||||
<img src="./components/img/user-img.png" alt="">
|
||||
<div class="info">
|
||||
<h2>李毅</h2>
|
||||
<p>共受理23条 | 已办结17条</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'UserList',
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.UserList {
|
||||
height: 100%;
|
||||
.item{
|
||||
padding: 24px 0 0 32px;
|
||||
background-color: #fff;
|
||||
img{
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin-right: 32px;
|
||||
}
|
||||
.info{
|
||||
display: inline-block;
|
||||
width: calc(100% - 112px);
|
||||
padding-bottom: 24px;
|
||||
border-bottom: 1px solid #E4E5E6;
|
||||
h2{
|
||||
font-size: 32px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
line-height: 44px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
p{
|
||||
font-size: 28px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #666;
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
427
src/project/saas/AppConflictMediation/add.vue
Normal file
427
src/project/saas/AppConflictMediation/add.vue
Normal file
@@ -0,0 +1,427 @@
|
||||
<template>
|
||||
<div class="album">
|
||||
<div class="form-item__group">
|
||||
<div class="form-item form-item__textarea">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="form-item__title">
|
||||
<i>*</i>
|
||||
<h2>事件描述</h2>
|
||||
</div>
|
||||
<div class="form-item__right">
|
||||
<textarea v-model="form.content" :maxlength="200" placeholder="请简要描述事件…"></textarea>
|
||||
</div>
|
||||
<div class="limit">{{ form.content.length }}/200</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item__group">
|
||||
<div class="form-item form-item__imgs">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="form-item__title">
|
||||
<i style="opacity: 0">*</i>
|
||||
<h2>图片上传</h2>
|
||||
<span>(最多9张)</span>
|
||||
</div>
|
||||
<div class="form-item__right">
|
||||
<!-- <AiUploader :def.sync="form.files" :limit="9" action="/admin/file/add2"></AiUploader> -->
|
||||
<AiUploader :def.sync="form.files" multiple placeholder="上传图片" :limit="9"
|
||||
action="/admin/file/add2"></AiUploader>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item__group">
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="form-item__title">
|
||||
<i>*</i>
|
||||
<h2>事件类型</h2>
|
||||
</div>
|
||||
<div class="form-item__right">
|
||||
<AiSelect :list="dictList" v-model="form.groupId"></AiSelect>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="form-item__title">
|
||||
<i>*</i>
|
||||
<h2>发生地点</h2>
|
||||
</div>
|
||||
<div class="form-item__right" @click="chooseAddress">
|
||||
<span v-if="form.address">{{ form.address }}</span>
|
||||
<i v-else>点击定位</i>
|
||||
<u-icon name="arrow-right" color="#ddd"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="form-item__title">
|
||||
<i>*</i>
|
||||
<h2>上报网格</h2>
|
||||
</div>
|
||||
<div class="form-item__right">
|
||||
<AiPagePicker type="custom" @select="handleSelectGrid" self
|
||||
:ops="{url:'../AppGridManagement/SelectGird',label: 'girdName'}">
|
||||
<AiMore v-model="form.girdName"/>
|
||||
</AiPagePicker>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item form-flow">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="form-item__title">
|
||||
<i>*</i>
|
||||
<h2>处理流程</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flow-option">
|
||||
<div class="byself" :class="!form.opts ? 'current' : ''" @click="form.opts = 0">自己办结</div>
|
||||
<div class="report" :class="form.opts ? 'current' : ''" @click="form.opts = 1">上报处理</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="this.form.opts == 0">
|
||||
<div class="form-item__group">
|
||||
<div class="form-item form-item__textarea">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="form-item__title">
|
||||
<i>*</i>
|
||||
<h2>办理结果</h2>
|
||||
</div>
|
||||
<div class="form-item__right">
|
||||
<textarea v-model="form.finishContent" :maxlength="200" placeholder="请输入办理结果信息"></textarea>
|
||||
</div>
|
||||
<div class="limit">{{ form.finishContent.length }}/200</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item__group">
|
||||
<div class="form-item form-item__imgs">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="form-item__title">
|
||||
<i style="opacity: 0">*</i>
|
||||
<h2>图片上传</h2>
|
||||
<span>(最多9张)</span>
|
||||
</div>
|
||||
<div class="form-item__right">
|
||||
<AiUploader :def.sync="form.finishFiles" multiple placeholder="上传图片" :limit="9"
|
||||
action="/admin/file/add2"></AiUploader>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn" @click="submit">上报</div>
|
||||
|
||||
<u-select v-model="showSelect" :list="girdList" label-name="girdName" value-name="id" @confirm="confirmSelect"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState} from 'vuex'
|
||||
|
||||
export default {
|
||||
appName: '新增事件',
|
||||
data() {
|
||||
return {
|
||||
isShowType: false,
|
||||
form: {
|
||||
content: '',
|
||||
files: [],
|
||||
groupId: '',
|
||||
address: '',
|
||||
girdName: '',
|
||||
flow: '',
|
||||
girdId: '',
|
||||
flag: false,
|
||||
finishContent: '',
|
||||
finishFiles: [],
|
||||
opts: 1,
|
||||
name: '',
|
||||
lat: '',
|
||||
lng: '',
|
||||
},
|
||||
dictList: [],
|
||||
arr: [],
|
||||
showSelect: false,
|
||||
girdList: [],
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
},
|
||||
|
||||
onShow() {
|
||||
document.title = '新增事件'
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
this.getDict()
|
||||
this.form.phone = this.user.phone
|
||||
this.form.name = this.user.name || ''
|
||||
this.getGirdList()
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleSelectGrid(v) {
|
||||
this.form.girdId = v?.id
|
||||
this.form.girdName = v?.girdName || ""
|
||||
},
|
||||
chooseAddress() {
|
||||
uni.chooseLocation({
|
||||
success: (res) => {
|
||||
this.form.address = res.address
|
||||
this.form.lat = res.latitude
|
||||
this.form.lng = res.longitude
|
||||
},
|
||||
})
|
||||
},
|
||||
|
||||
getDict() {
|
||||
this.$http.post(`/app/appclapeventgroup/list`).then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.dictList = res.data.records.map((v) => {
|
||||
return {
|
||||
value: v.id,
|
||||
label: v.groupName,
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
getGirdData(x) {
|
||||
if (x > -1) {
|
||||
this.$set(this.gridList, '1', this.arr[0].girdList[x].girdList)
|
||||
}
|
||||
},
|
||||
|
||||
getGirdList() {
|
||||
this.$http.post(`/app/appgirdmemberinfo/queryMyGirdListByLevel2AndUser`).then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.arr = res.data
|
||||
this.girdList = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
onColumnChange(e) {
|
||||
const column = e.detail.column
|
||||
const value = e.detail.value
|
||||
|
||||
if (column === column) {
|
||||
this.getGirdData(value)
|
||||
}
|
||||
},
|
||||
|
||||
onChange(e) {
|
||||
const v = e.detail.value[1]
|
||||
if (this.gridList[1][v]) {
|
||||
this.form.girdName = this.gridList[1][v].girdName
|
||||
this.form.girdId = this.gridList[1][v].id
|
||||
} else {
|
||||
return this.$u.toast('所属网格必须选第三级网格')
|
||||
}
|
||||
},
|
||||
|
||||
submit() {
|
||||
if (!this.form.content) {
|
||||
return this.$u.toast('请输入事件描述')
|
||||
}
|
||||
if (!this.form.groupId) {
|
||||
return this.$u.toast('请选择事件类型')
|
||||
}
|
||||
if (!this.form.address) {
|
||||
return this.$u.toast('请选择发生地点')
|
||||
}
|
||||
if (!this.form.girdName) {
|
||||
return this.$u.toast('请选择上报网格')
|
||||
}
|
||||
if (this.form.opts == 0) {
|
||||
if (!this.form.finishContent) {
|
||||
return this.$u.toast('请输入事件办理结果')
|
||||
}
|
||||
}
|
||||
|
||||
if (this.flag) return
|
||||
this.flag = true
|
||||
|
||||
this.$http
|
||||
.post(`/app/appclapeventinfo/addOrUpdate?`, {
|
||||
...this.form,
|
||||
files: this.form.files,
|
||||
finishFiles: this.form.finishFiles,
|
||||
groupName: this.dictList.filter((v) => v.value === this.form.groupId)[0].label,
|
||||
eventStatus: this.form.opts == 0 ? '2' : '0',
|
||||
})
|
||||
.then((res) => {
|
||||
this.$u.toast('上报成功')
|
||||
this.flag = false
|
||||
if (res.code == 0) {
|
||||
uni.$emit('update')
|
||||
this.$forceUpdate()
|
||||
setTimeout(() => {
|
||||
uni.navigateBack()
|
||||
}, 600)
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.album {
|
||||
padding-bottom: 140px;
|
||||
|
||||
.form-item__group {
|
||||
margin-bottom: 24px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.limit {
|
||||
text-align: right;
|
||||
font-size: 28px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
padding-left: 32px;
|
||||
|
||||
.form-item__wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 128px;
|
||||
padding-right: 28px;
|
||||
border-bottom: 1px solid #dddddd;
|
||||
|
||||
input {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
text-align: right;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.form-item__right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 32px;
|
||||
|
||||
span {
|
||||
max-width: 400px;
|
||||
margin-right: 8px;
|
||||
color: #333333;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
i {
|
||||
font-style: normal;
|
||||
margin-right: 8px;
|
||||
color: #999999;
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.form-item__wrapper {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.form-item__title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
i {
|
||||
font-size: 30px;
|
||||
color: #ff4466;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 28px;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
h2 {
|
||||
padding: 0 4px;
|
||||
font-weight: 600;
|
||||
font-size: 32px;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
&.form-item__imgs,
|
||||
&.form-item__textarea {
|
||||
.form-item__wrapper {
|
||||
display: block;
|
||||
height: auto;
|
||||
padding-bottom: 32px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
height: 160px;
|
||||
}
|
||||
|
||||
.form-item__title {
|
||||
padding: 32px 0;
|
||||
}
|
||||
|
||||
.form-item__right {
|
||||
padding-left: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-flow {
|
||||
height: 280px;
|
||||
padding-right: 40px;
|
||||
}
|
||||
|
||||
.flow-option {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.byself,
|
||||
.report {
|
||||
height: 112px;
|
||||
width: 45%;
|
||||
background: #f5f5f5;
|
||||
line-height: 112px;
|
||||
text-align: center;
|
||||
font-size: 30px;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.current {
|
||||
color: #1174fe;
|
||||
background: #e7f1fe !important;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
background: #3975c6;
|
||||
line-height: 120px;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
::v-deep .ai-uploader .fileList .default {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
BIN
src/project/saas/AppConflictMediation/components/1.png
Normal file
BIN
src/project/saas/AppConflictMediation/components/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 623 B |
BIN
src/project/saas/AppConflictMediation/components/22.png
Normal file
BIN
src/project/saas/AppConflictMediation/components/22.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 810 B |
Binary file not shown.
|
After Width: | Height: | Size: 815 B |
BIN
src/project/saas/AppConflictMediation/components/img/bg-1.png
Normal file
BIN
src/project/saas/AppConflictMediation/components/img/bg-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
BIN
src/project/saas/AppConflictMediation/components/img/bg-2.png
Normal file
BIN
src/project/saas/AppConflictMediation/components/img/bg-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
BIN
src/project/saas/AppConflictMediation/components/img/bg-3.png
Normal file
BIN
src/project/saas/AppConflictMediation/components/img/bg-3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 314 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
src/project/saas/AppConflictMediation/components/img/jujue.png
Normal file
BIN
src/project/saas/AppConflictMediation/components/img/jujue.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 803 B |
Binary file not shown.
|
After Width: | Height: | Size: 373 B |
Binary file not shown.
|
After Width: | Height: | Size: 766 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user