271 lines
10 KiB
Vue
271 lines
10 KiB
Vue
<template>
|
|
<view class="min-height bg-main-light p-30">
|
|
<HeaderItem title="公证申请"/>
|
|
<TitleItem title="人员信息"/>
|
|
<view class="card mt-25 p-30" v-for="(item, index) in peopleList" :key="index">
|
|
<u-form label-width="140rpx">
|
|
<u-form-item label="姓名" border-bottom>
|
|
<u-input v-model="peopleList[index].name" border="none" placeholder="请输入姓名"/>
|
|
</u-form-item>
|
|
<u-form-item label="性别" border-bottom>
|
|
<view class="flex justify-start items-center">
|
|
<view class="tag" @click="peopleList[index].gender = 0"
|
|
:class="[peopleList[index].gender === 0 ? 'tag-active' : '']">男
|
|
</view>
|
|
<view class="tag ml-20" @click="peopleList[index].gender = 1"
|
|
:class="[peopleList[index].gender === 1 ? 'tag-active' : '']">
|
|
女
|
|
</view>
|
|
</view>
|
|
</u-form-item>
|
|
<u-form-item label="角色" border-bottom>
|
|
<u-input v-model="peopleList[index].role" border="none" placeholder="请输入角色(如:申请人)"/>
|
|
</u-form-item>
|
|
<u-form-item label="联系电话" border-bottom>
|
|
<u-input v-model="peopleList[index].phone" border="none" placeholder="请输入联系电话"/>
|
|
</u-form-item>
|
|
<u-form-item label="民族" border-bottom>
|
|
<u-input v-model="peopleList[index].nation" border="none" placeholder="请输入民族"/>
|
|
</u-form-item>
|
|
<u-form-item label="出生日期" border-bottom @click="openDate(index)">
|
|
<u-input v-model="peopleList[index].birthday" border="none" placeholder="请输入出生日期" readonly>
|
|
<u-icon
|
|
slot="right"
|
|
name="arrow-right"
|
|
></u-icon>
|
|
</u-input>
|
|
</u-form-item>
|
|
<u-form-item label="地址">
|
|
<u-input v-model="peopleList[index].liveAddress" border="none" placeholder="请输入地址"/>
|
|
</u-form-item>
|
|
<u-button type="error" shape="circle" @click="removePeople(index)" v-if="this.peopleList.length > 1">删除
|
|
</u-button>
|
|
</u-form>
|
|
</view>
|
|
<view class="mt-30">
|
|
<u-button type="success" shape="circle" @click="addPeople"
|
|
:hairline="false"
|
|
:custom-style="{border: 0, background: 'linear-gradient(91.28deg, rgba(14,146,252,1) 27.63%,rgba(29,188,188,1) 80.08%);'}">
|
|
添加人员
|
|
</u-button>
|
|
</view>
|
|
<TitleItem title="基础信息"/>
|
|
<view class="card mt-25 p-30">
|
|
<u-form label-width="140rpx">
|
|
<u-form-item label="公证类别" required border-bottom @click="showType = true">
|
|
<u-input v-model="formData.type" border="none" placeholder="请选择公证类别" readonly>
|
|
<u-icon
|
|
slot="right"
|
|
name="arrow-right"
|
|
></u-icon>
|
|
</u-input>
|
|
</u-form-item>
|
|
<u-form-item label="公证事项" required border-bottom>
|
|
<u-textarea v-model="formData.content" border="none" placeholder="请输入公证事项" maxlength="-1"/>
|
|
</u-form-item>
|
|
<u-form-item label="用途" required border-bottom>
|
|
<u-input v-model="formData.application" border="none" placeholder="请输入用途"/>
|
|
</u-form-item>
|
|
<u-form-item label="使用地" required border-bottom>
|
|
<u-input v-model="formData.address" border="none" placeholder="请输入使用地"/>
|
|
</u-form-item>
|
|
<u-form-item label="译文" border-bottom>
|
|
<u-input v-model="formData.translate" border="none" placeholder="请输入译文"/>
|
|
</u-form-item>
|
|
</u-form>
|
|
</view>
|
|
<TitleItem title="证明材料"/>
|
|
<view class="card mt-25 p-30" v-if="selectedConfig && selectedConfig.configList">
|
|
<view class="flex flex-col justify-start items-start py-20 border-bottom"
|
|
v-for="(item, index) in JSON.parse(selectedConfig.configList)" :key="index">
|
|
<text class="text-25 mb-15">{{ item }}</text>
|
|
<view class="flex flex-col justify-start items-start">
|
|
<!-- <u-tag type="success" plain plain-fill v-for="(file, fileIndex) in fileList[index].fileList"-->
|
|
<!-- :key="fileIndex"-->
|
|
<!-- :text="`文件:${fileIndex + 1}`" closable @close="removeFile(index, fileIndex)"/>-->
|
|
<view class="flex justify-start items-start flex-wrap">
|
|
<view class="album-item pos-r" v-for="(file, fileIndex) in fileList[index].fileList" :key="fileIndex">
|
|
<u-image :src="file" width="190rpx" height="190rpx"/>
|
|
<view class="del-wrap" @click="removeFile(index, fileIndex)">
|
|
<u-icon name="trash" color="white" size="30rpx"/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view>
|
|
<u-button size="mini" @click="uploadFile(index)" type="primary" icon="arrow-upward">上传材料</u-button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="mt-30">
|
|
<u-button type="primary" shape="circle" @click="save"
|
|
:hairline="false"
|
|
:custom-style="{border: 0, background: 'linear-gradient(91.28deg, rgba(14,146,252,1) 27.63%,rgba(29,188,188,1) 80.08%);'}">
|
|
提交
|
|
</u-button>
|
|
</view>
|
|
<u-datetime-picker
|
|
:show="showDate"
|
|
v-model="checkDate"
|
|
mode="date"
|
|
:min-date="minDate"
|
|
@confirm="selectDate"
|
|
@cancel="showDate = false"
|
|
/>
|
|
<u-picker :show="showType" :columns="[typeList]" @cancel="showType = false"
|
|
@confirm="selectType" key-name="title"
|
|
/>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import HeaderItem from "@/components/HeaderItem.vue";
|
|
import TitleItem from "@/components/TitleItem.vue";
|
|
import dayjs from "dayjs";
|
|
import {lawLegalAidReq, lawOrgCheckActionReq} from "@/api/lawOrg";
|
|
import {listNotaryConfigReq, notaryActionReq} from "@/api/notary";
|
|
import {chooseImg} from "@/util";
|
|
|
|
export default {
|
|
name: "newRequest",
|
|
components: {TitleItem, HeaderItem},
|
|
data() {
|
|
return {
|
|
formData: {
|
|
nameList: '',
|
|
type: '',
|
|
content: '',
|
|
application: '',
|
|
address: '',
|
|
translate: '',
|
|
fileList: '',
|
|
},
|
|
showDate: false,
|
|
checkDate: Number(new Date()),
|
|
minDate: dayjs().subtract(100, 'year').valueOf(),
|
|
peopleList: [],
|
|
typeList: [],
|
|
originTypeList: [],
|
|
clickedIndex: 0,
|
|
selectedConfig: null,
|
|
fileList: [],
|
|
showType: false
|
|
}
|
|
},
|
|
methods: {
|
|
async getConfigList() {
|
|
const {data} = await listNotaryConfigReq()
|
|
this.typeList = data.map(item => {
|
|
item.title = `${item.type}·${item.title}`
|
|
return item
|
|
})
|
|
this.originTypeList = JSON.parse(JSON.stringify(this.typeList))
|
|
this.selectedConfig = this.typeList[0]
|
|
this.formData.type = this.selectedConfig.title
|
|
this.fileList = []
|
|
JSON.parse(this.selectedConfig.configList).map(item => {
|
|
this.fileList.push({
|
|
title: item,
|
|
fileList: []
|
|
})
|
|
})
|
|
},
|
|
selectType({value}) {
|
|
this.selectedConfig = value[0]
|
|
this.formData.type = this.selectedConfig.title
|
|
this.showType = false
|
|
this.fileList = []
|
|
JSON.parse(this.selectedConfig.configList).map(item => {
|
|
this.fileList.push({
|
|
title: item,
|
|
fileList: []
|
|
})
|
|
})
|
|
},
|
|
async uploadFile(index) {
|
|
const res = await chooseImg(9)
|
|
this.fileList[index].fileList = [...this.fileList[index].fileList, ...res.map(item => item.path)]
|
|
},
|
|
removeFile(index, fileIndex) {
|
|
this.fileList[index].fileList.splice(fileIndex, 1)
|
|
},
|
|
selectDate({value}) {
|
|
this.showDate = false
|
|
this.peopleList[this.clickedIndex].birthday = dayjs(value).format("YYYY-MM-DD")
|
|
this.checkDate = Number(new Date())
|
|
},
|
|
openDate(index) {
|
|
this.clickedIndex = index
|
|
if (this.peopleList[this.clickedIndex].birthday) this.checkDate = dayjs(this.peopleList[this.clickedIndex].birthday).valueOf()
|
|
this.showDate = true
|
|
},
|
|
addPeople() {
|
|
this.peopleList.push({
|
|
name: '',
|
|
gender: 0,
|
|
role: '',
|
|
phone: '',
|
|
nation: '',
|
|
birthday: '',
|
|
liveAddress: '',
|
|
})
|
|
},
|
|
removePeople(index) {
|
|
if (this.peopleList.length === 1) return
|
|
this.peopleList.splice(index, 1)
|
|
},
|
|
async save() {
|
|
if (!this.formData.type) return this.$toast('请选择公证类别')
|
|
if (!this.formData.content) return this.$toast('请输入公证事项')
|
|
if (!this.formData.application) return this.$toast('请输入用途')
|
|
if (!this.formData.address) return this.$toast('请输入使用地')
|
|
let hasRequired = false
|
|
for (let i = 0; i < this.peopleList.length; i++) {
|
|
if (!this.peopleList[i].name) return this.$toast('请输入姓名')
|
|
if (!this.peopleList[i].role) return this.$toast('请输入角色')
|
|
if (!this.peopleList[i].phone) return this.$toast('请输入手机号')
|
|
if (!this.peopleList[i].nation) return this.$toast('请输入民族')
|
|
if (!this.peopleList[i].birthday) return this.$toast('请选择出生日期')
|
|
if (!this.peopleList[i].liveAddress) return this.$toast('请输入居住地')
|
|
if (this.peopleList[i].role === '申请人') hasRequired = true
|
|
}
|
|
if (!hasRequired) return this.$toast('请至少录入申请人')
|
|
for (let i = 0; i < this.fileList.length; i++) {
|
|
if (!this.fileList[i].fileList.length) return this.$toast(`请上传${this.fileList[i].title}材料`)
|
|
}
|
|
this.formData.nameList = JSON.stringify(this.peopleList)
|
|
this.formData.fileList = JSON.stringify(this.fileList)
|
|
const res = await notaryActionReq(this.formData)
|
|
if (res) {
|
|
this.$toast('提交成功')
|
|
setTimeout(() => {
|
|
uni.navigateBack()
|
|
}, 500)
|
|
}
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.getConfigList()
|
|
this.addPeople()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.tag {
|
|
border: 1px dashed #999;
|
|
padding: 10rpx;
|
|
border-radius: 15rpx;
|
|
color: #999;
|
|
font-size: 25rpx;
|
|
width: 60rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.tag-active {
|
|
color: #3c9cff !important;
|
|
border-color: #3c9cff !important;
|
|
}
|
|
</style> |