Files
dvcp_v2_wxcp_app/src/apps/AppWalkask/add.vue
花有清香月有阴 1ba381eea0 列表刷新
2021-12-24 11:52:02 +08:00

283 lines
7.7 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 v-model="forms.areaId" :areaId="areaIdProps" @select="areaSelect" style="color: #333"></AiAreaPicker>
</u-form-item>
<div class="line"></div>
<u-form-item label="走访对象" prop="create_user_name" required right-icon="arrow-right" class="create_user_names">
<u-input v-model="forms.create_user_name" disabled placeholder="请选择走访对象" @click="toWalkObject" />
</u-form-item>
<div class="line"></div>
<u-form-item label="现实状态" prop="reality" right-icon="arrow-right" class="realitys">
<u-input v-model="forms.reality" disabled placeholder="请选择现实状态" @click="showStstus = true" />
<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">
<u-input v-model="forms.title" placeholder="请输入入户走访事项(30字以内)" type="textarea" auto-height height="60" maxlength="30" />
<div>{{ forms.title.length }}/30</div>
</u-form-item>
<div class="line"></div>
<u-form-item label="入户走访内容" prop="description" label-position="top">
<u-input v-model="forms.description" placeholder="请输入入户走访事项(500字以内)" type="textarea" auto-height height="60" maxlength="500" />
<div>{{ forms.description.length }}/500</div>
</u-form-item>
<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"></AiUploader>
</u-form-item>
</u-form>
</div>
<div class="btn" @click="submit">保存</div>
</div>
<component v-else :is="comp" :paramss="params" @back="backlist"></component>
</div>
</template>
<script>
import { mapState } from 'vuex'
import walkObject from './walkObject'
export default {
name: 'add',
components: {
walkObject,
},
props: {
params: {},
},
data() {
return {
show: false,
forms: {
areaId: '',
optionId: '',
create_user_name: '',
reality: '',
realityValue: '',
menuLevel3Name: '',
title: '',
description: '',
images: [],
},
showAreaId: false,
showStstus: false,
flag: false,
addList: true,
areaIdProps: '',
clickedUserSelect: false,
}
},
computed: { ...mapState(['user']) },
created() {
uni.setNavigationBarTitle({ title: '新建走访' })
this.areaIdProps = this.user.areaId
this.forms.areaId = this.user.areaId
this.$dict.load('realityStatus').then(() => {
this.getDetail()
})
},
mounted() {},
methods: {
getDetail() {
if (this.params.id) {
this.$http.post(`/app/appvisitvondolence/queryDetailById?id=${this.params.id}`).then((res) => {
if (res?.data) {
this.forms = res.data
this.forms.realityValue = res.data.reality
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.create_user_name) {
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,
applicationId: this.forms.applicationId,
name: this.forms.create_user_name,
menuLevel3Name: this.forms.menuLevel3Name,
optionId: 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) {
if (e.type == 5) {
this.forms.areaId = e.id
}
if (e.type == 4) {
this.forms.areaId = e.id
}
},
backlist(e) {
this.forms.create_user_name = e.item.create_user_name
this.forms.menuLevel3Name = e.menuLevel3Name
this.forms.applicationId = e.appId
this.forms.optionId = e.item.id
this.addList = true
},
realityStstus(e) {
this.forms.reality = e[0].label
this.forms.realityValue = e[0].value
},
toWalkObject() {
this.addList = false
this.comp = 'walkObject'
this.paramss = 111
},
},
}
</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;
}
.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;
}
}
</style>