Files
dvcp_v2_wxcp_app/library/apps/AppWalkask/add.vue
2024-10-31 14:34:57 +08:00

330 lines
8.9 KiB
Vue

<template>
<div class="add">
<div v-if="addList">
<div class="header-description">
<u-form :model="forms" ref="uForm" label-width="auto">
<u-form-item label="区域选择" prop="areaId" class="areaIds" style="position: relative">
<AiAreaPicker :value="forms.areaId" :areaId="areaIdProps" @select="areaSelect" isForm/>
</u-form-item>
<div class="line"></div>
<u-form-item label="走访对象" prop="name" required :right-icon="id ? '' : 'arrow-right'"
class="create_user_names">
<u-input v-model="forms.name" disabled placeholder="请选择走访对象" @click="toWalkObject"/>
</u-form-item>
<div class="line"></div>
<u-form-item label="走访时间" prop="visitTime" required :right-icon="id ? '' : 'arrow-right'" class="realitys">
<u-input v-model="forms.visitTime" disabled placeholder="请选择走访时间" @click="showVisitTime = true"/>
<u-picker v-model="showVisitTime" :params="params" mode="time" @confirm="change"></u-picker>
</u-form-item>
<div class="line"></div>
<u-form-item label="现实状态" prop="reality" :right-icon="id ? '' : 'arrow-right'" class="realitys">
<u-input v-model="forms.reality" disabled placeholder="请选择现实状态" @click="realityClick"/>
<u-select v-model="showStstus" :list="$dict.getDict('realityStatus')" value-name="dictValue"
label-name="dictName" @confirm="realityStstus"></u-select>
</u-form-item>
<div class="line"></div>
<u-form-item label="入户走访事项" prop="title" required label-position="top" :border-bottom="false">
<u-input v-model="forms.title" placeholder="请输入入户走访事项(30字以内)" type="textarea" auto-height height="60"
:maxlength="30"/>
</u-form-item>
<div class="hint">{{ forms.title.length }}/30</div>
<div class="line"></div>
<u-form-item label="入户走访内容" prop="description" label-position="top" :border-bottom="false">
<u-input v-model="forms.description" placeholder="请输入入户走访事项(500字以内)" type="textarea" auto-height height="60"
:maxlength="500"/>
</u-form-item>
<div class="hint">{{ forms.description.length }}/500</div>
<div class="line"></div>
<u-form-item label="图片(最多9张)" prop="images" class="avatars" label-position="top" :border-bottom="false">
<AiUploader :def.sync="forms.images" multiple placeholder="上传图片" :limit="9" action="/admin/file/add2"
sourceType="camera"></AiUploader>
</u-form-item>
</u-form>
</div>
<div class="btn" @click="submit">保存</div>
</div>
</div>
</template>
<script>
import {mapState} from 'vuex'
export default {
name: 'add',
props: {},
data() {
return {
show: false,
forms: {
areaId: '',
areaName: '',
optionId: '',
name: '',
reality: '',
realityValue: '',
menuLevel3Name: '',
applicationId: '',
title: '',
description: '',
images: [],
},
showAreaId: false,
showStstus: false,
flag: false,
addList: true,
areaIdProps: '',
clickedUserSelect: false,
id: '',
name: '',
optionId: '',
showVisitTime: false,
params: {
year: true,
month: true,
day: true,
hour: true,
minute: true,
second: true,
},
}
},
computed: {...mapState(['user'])},
onLoad(o) {
this.id = o.id ? o.id : ''
this.areaIdProps = this.user.areaId
if (!this.id) {
this.forms.areaId = this.user.areaId
}
this.$dict.load('realityStatus').then(() => {
this.getDetail()
})
uni.$on('goBack', (data) => {
this.forms.menuLevel3Name = data.applicationName
this.forms.applicationId = data.applicationId
this.forms.name = data.selectUser.name
this.forms.optionId = data.selectUser.id
})
},
onShow() {
document.title = '新建走访'
},
methods: {
realityClick() {
if (this.id) return
if (!this.forms.name) {
return this.$u.toast('请选择走访对象')
}
this.showStstus = true
},
getDetail() {
if (this.id) {
this.$http.post(`/app/appvisitvondolence/queryDetailById?id=${this.id}`).then((res) => {
if (res?.data) {
this.forms = res.data
this.forms.create_user_name = res.data.name
this.forms.realityValue = res.data.reality
this.forms.areaId = res.data.areaId
this.forms.areaName = res.data.areaName
this.forms.reality = this.$dict.getLabel('realityStatus', res.data.reality)
if (res.data.images) {
this.forms.images = JSON.parse(res.data.images || '[]')
}
}
})
}
},
submit() {
if (this.flag) return
this.$refs.uForm.validate((valid) => {
if (valid) {
if (!this.forms.name) {
return this.$u.toast('请选择走访对象')
}
if (!this.forms.visitTime) {
return this.$u.toast('请选择走访时间')
}
if (!this.forms.title) {
return this.$u.toast('请输入入户走访事项')
}
const imgs = []
if (this.forms.images) {
this.forms.images.map((e) => {
imgs.push({url: e.url, id: e.id})
})
}
this.flag = true
this.$http
.post(`/app/appvisitvondolence/addOrUpdate`, {
areaId: this.forms.areaId,
name: this.forms.name,
visitTime: this.forms.visitTime,
optionId: this.forms.optionId,
// menuLevel3Name: this.forms.menuLevel3Name,
applicationId: this.forms.applicationId,
reality: this.forms.realityValue ? this.forms.realityValue : this.forms.reality,
title: this.forms.title,
description: this.forms.description,
createUserId: this.user.id,
createUserName: this.user.name,
images: JSON.stringify(imgs) || [],
id: this.id,
})
.then((res) => {
if (res.code == 0) {
this.$u.toast('保存成功')
this.flag = false
uni.$emit('updateList')
setTimeout(() => {
uni.navigateBack()
}, 600)
}
})
} else {
this.$u.toast('保存失败')
}
})
},
areaSelect(e) {
this.forms.areaId = e
},
change(e) {
this.forms.visitTime = e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute + ':' + e.second
},
realityStstus(e) {
this.forms.reality = e[0].label
this.forms.realityValue = e[0].value
},
toWalkObject() {
uni.navigateTo({url: `./selectType`})
},
},
}
</script>
<style lang="scss" scoped>
.add {
height: 100%;
background: #f3f6f9;
.header-description {
padding-bottom: 162px;
background: #f3f6f9;
::v-deep .u-form {
background: #fff;
.u-form-item {
.u-form-item__body {
.u-form-item--right__content__slot {
padding-bottom: 0;
}
}
}
.u-form-item:last-child {
margin-bottom: 0;
padding-bottom: 20px !important;
}
.areaIds {
.u-form-item__body {
.u-form-item--right {
.u-form-item--right__content {
.u-form-item--right__content__slot {
.AiAreaPicker {
width: 100%;
display: flex;
justify-content: flex-end;
.AiSearchPopup {
.areaSelector {
.location {
opacity: 0;
}
}
}
}
}
}
}
}
}
.create_user_names,
.realitys {
.u-form-item__body {
.u-form-item--right__content__slot {
.u-input {
text-align: right !important;
}
}
}
}
.line {
height: 16px;
background: #f3f6f9;
}
.hint {
padding: 4px 32px 8px 0;
text-align: right;
color: #999;
}
.avatars {
.u-form-item__body {
.default {
width: 160px;
height: 160px;
}
}
}
}
}
.btn {
position: fixed;
bottom: 0;
width: 100%;
height: 112px;
line-height: 112px;
background: #1365dd;
text-align: center;
font-size: 32px;
font-weight: 500;
color: #ffffff;
z-index: 999;
}
}
</style>