mkm/OfficeApp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新增了新增档案页面,常住人口组件

Browse Source
This commit is contained in:
weipengfei 2023-07-28 16:09:04 +08:00
parent 631fbdd246
commit de2dc55f3a
5 changed files with 461 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
components/newArchives/model.vue Normal file
View File

@ -0,0 +1,22 @@
<template>
<view class="">
模型组件
</view>
</template>
<script>
export default {
data() {
return {
text:''
}
},
methods: {
},
}
</script>
<style lang="scss">
</style>

22
components/newArchives/productionInputs.vue Normal file
View File

@ -0,0 +1,22 @@
<template>
<view class="">
<input type="text" v-model="text">
</view>
</template>
<script>
export default {
data() {
return {
text:''
}
},
methods: {
},
}
</script>
<style lang="scss">
</style>

214
components/newArchives/residents.vue Normal file
View File

@ -0,0 +1,214 @@
<!-- 常住人口 -->
<template>
<view class="">
<u--form labelPosition="left" :model="residents" :rules="rules" ref="uForm">
<block value="人口">
<block value="人员信息" v-for="(item, index) in residents.userList" :key="'user'+index">
<u-form-item label="姓名" required prop="residents.nickname" borderBottom>
<u--input v-model="item.nickname" placeholder="请输入姓名"></u--input>
</u-form-item>
<picker mode="date" value="1990-01-01" @change="changeBirthday" :data-index="index">
<u-form-item labelWidth="auto" label="出生日期" required prop="residents.nickname" borderBottom>
<u--input :value="item.birthday" placeholder="请选择出生日期" disabled disabledColor="#fff"></u--input>
<u-icon slot="right" name="arrow-right"></u-icon>
</u-form-item>
</picker>
<picker mode="selector" :range="['公务员','国企事业单位','民营企业','自由职业','其他']" @change="">
<u-form-item labelWidth="auto" label="就业情况" required prop="residents.nickname" borderBottom>
<u--input :value="item.jobType" placeholder="请选择就业情况" disabled disabledColor="#fff"></u--input>
<u-icon slot="right" name="arrow-right"></u-icon>
</u-form-item>
</picker>
<u-form-item labelWidth="auto" label="技能特长" required prop="residents.nickname" borderBottom>
<u--input v-model="item.skill" placeholder="请输入技能特长"></u--input>
</u-form-item>
<button type="primary" v-if="residents.userList.length>1" class="delete"
@click="removeUserList(index)">删除以上信息</button>
</block>
<button type="primary" class="plus" @click="pushUserList">+</button>
</block>
<block value="婴幼儿信息">
<u-form-item labelWidth="auto" label="是否存在学生、婴幼儿" required prop="residents.infant" borderBottom>
<u-radio-group v-model="residents.infant" style="margin: 16rpx;">
<u-radio :customStyle="{marginRight: '16px'}"
v-for="(item, index) in [{value:1,label:'是'},{value:0,label:'否'}]" :key="index" :label="item.label"
:name="item.value">
</u-radio>
</u-radio-group>
</u-form-item>
<block value="是" v-if="residents.infant>0" v-for="(item,index) in residents.infantList" :key="'infant'+index">
<u-form-item label="年龄" required prop="residents.infantList.age" borderBottom>
<u--input v-model="item.age" placeholder="请输入年龄" type="number"></u--input>
</u-form-item>
<block v-if="item.age<4">
<u-form-item labelWidth="auto" label="喂养方式" required prop="residents.infant" borderBottom>
<u-radio-group v-model="item.wyfs" style="margin: 16rpx;">
<u-radio :customStyle="{marginRight: '16px'}"
v-for="(item, index) in [{value:1,label:'母乳'},{value:0,label:'奶粉'}]" :key="index" :label="item.label"
:name="item.value">
</u-radio>
</u-radio-group>
</u-form-item>
</block>
<block v-else>
<u-form-item label="年级" required prop="residents.infantList.age" borderBottom>
<u--input v-model="item.grade" placeholder="请输入年级"></u--input>
</u-form-item>
<u-form-item labelWidth="auto" label="是否补课" required prop="residents.infant" borderBottom>
<u-radio-group v-model="item.is_course" style="margin: 16rpx;">
<u-radio :customStyle="{marginRight: '16px'}"
v-for="(item, index) in [{value:1,label:'是'},{value:0,label:'否'}]" :key="index" :label="item.label"
:name="item.value">
</u-radio>
</u-radio-group>
</u-form-item>
<u-form-item v-if="item.is_course>0" label-width="auto" labelPosition="top" label="补课内容" prop="residents.infantList.age"
borderBottom>
<u--textarea v-model="item.course" autoHeight placeholder="请输入需要的课程" border="surround"
count></u--textarea>
</u-form-item>
<u-form-item label-width="auto" labelPosition="top" label="备注" prop="residents.infantList.age" borderBottom>
<u--textarea v-model="item.remark" autoHeight placeholder="请输入备注" border="surround" count></u--textarea>
</u-form-item>
</block>
<button type="primary" v-if="residents.infantList.length>1" class="delete"
@click="removeInfantList(index)">删除以上信息</button>
</block>
<button type="primary" class="plus" @click="pushInfantList">+</button>
</block>
<u-form-item labelWidth="auto" label="汽车是否能到家" required prop="residents.infant" borderBottom>
<u-radio-group v-model="residents.is_car" style="margin: 16rpx;">
<u-radio :customStyle="{marginRight: '16px'}"
v-for="(item, index) in [{value:1,label:'是'},{value:0,label:'否'}]" :key="index" :label="item.label"
:name="item.value">
</u-radio>
</u-radio-group>
</u-form-item>
<block value="智能手机">
<u-form-item labelWidth="auto" label="是否使用智能手机" required prop="residents.infant" borderBottom>
<u-radio-group v-model="residents.is_smartphone" style="margin: 16rpx;">
<u-radio :customStyle="{marginRight: '16px'}"
v-for="(item, index) in [{value:1,label:'是'},{value:0,label:'否'}]" :key="index" :label="item.label"
:name="item.value">
</u-radio>
</u-radio-group>
</u-form-item>
<block v-if="residents.is_smartphone>0">
<u-form-item labelWidth="auto" label="微信号" required prop="residents.infantList.age" borderBottom>
<u--input v-model="residents.wechat" placeholder="请输入微信号"></u--input>
</u-form-item>
</block>
</block>
</u--form>
</view>
</template>
<script>
export default {
data() {
return {
// 常住人口
residents: {
userList: [{
nickname: '',
birthday: '',
jobType: '', // 工作
skill: '', // 技能
}],
infant: '', //是否存在婴幼儿
infantList: [ //婴幼儿列表
{
age: '',
wsfy: '', //喂养方式
grade: '', //年级
is_course: '', //是否补课
course: '', //课程
remark: '' //备注
}
],
is_car: '',//汽车是否能到家
is_smartphone: '',//是否使用智能手机
wechat: '', //微信号
},
rules: {
}
}
},
methods: {
changeBirthday(e){
console.log(e);
},
// 添加人口
pushUserList() {
this.residents.userList.push({
nickname: '',
birthday: '',
jobType: '',
skill: '',
})
},
// 删除人口
removeUserList(index) {
uni.showModal({
confirmColor: '#f56c6c',
content: '确定删除吗?',
success: (res) => {
if (res.confirm) {
this.residents.userList.splice(index, 1);
}
}
})
},
// 添加婴幼儿
pushInfantList() {
this.residents.infantList.push({
age: '',
wsfy: '', //喂养方式
grade: '', //年级
course: '', //课程
remark: '' //备注
})
},
// 删除婴幼儿
removeInfantList(index) {
uni.showModal({
confirmColor: '#f56c6c',
content: '确定删除吗?',
success: (res) => {
if (res.confirm) {
this.residents.infantList.splice(index, 1);
}
}
})
},
},
}
</script>
<style lang="scss">
.delete {
margin: 22rpx 0;
// margin-bottom: 40rpx;
width: 100%;
height: 54rpx;
line-height: 54rpx;
background: #f56c6c;
border-radius: 14rpx;
font-size: 28rpx;
color: #fff;
text-align: center;
}
.plus {
margin: 22rpx 0;
// margin-bottom: 40rpx;
width: 100%;
height: 54rpx;
line-height: 54rpx;
background: $theme-oa-color;
border-radius: 14rpx;
color: #fff;
text-align: center;
}
</style>

43
subpkg/archives/archives.vue Normal file
View File

@ -0,0 +1,43 @@
<template>
<view class="">
<button class="new_btn" @click="navTo('/subpkg/newArchives/newArchives')">新建档案</button>
</view>
</template>
<script>
export default {
data() {
return {
}
},
onLoad() {},
onShow() {},
methods: {
navTo(url) {
url ?
uni.navigateTo({
url: url,
}) : Toast('暂未开放')
},
},
onPullDownRefresh() {
uni.stopPullDownRefresh()
}
}
</script>
<style lang="scss">
.new_btn {
margin: 0 auto;
margin-top: 32rpx;
// margin-bottom: 40rpx;
width: 694rpx;
height: 84rpx;
background: $theme-oa-color;
border-radius: 42rpx 42rpx 42rpx 42rpx;
color: #fff;
line-height: 80rpx;
text-align: center;
}
</style>

160
subpkg/newArchives/newArchives.vue Normal file
View File

@ -0,0 +1,160 @@
<template>
<view class="">
<view class="card">
<u--form labelPosition="left" :model="formData" :rules="rules" ref="uForm">
<view class="item">
<view class="title">基本信息</view>
<u-form-item labelWidth="auto" label="户主姓名" required prop="nickname" borderBottom>
<u--input v-model="formData.nickname" placeholder="请输入姓名"></u--input>
</u-form-item>
<u-form-item label="性别" required prop="sex" borderBottom>
<u-radio-group v-model="formData.sex" style="margin: 16rpx;">
<u-radio :customStyle="{marginRight: '16px'}"
v-for="(item, index) in [{value:1,label:'男'},{value:0,label:'女'}]" :key="index" :label="item.label"
:name="item.value">
</u-radio>
</u-radio-group>
</u-form-item>
<u-form-item labelWidth="auto" label="身份证号" required prop="id_card" borderBottom>
<u--input v-model="formData.id_card" placeholder="请输入身份证号" type="idcard"></u--input>
</u-form-item>
<u-form-item labelWidth="auto" label="联系方式" required prop="account" borderBottom>
<u--input v-model="formData.account" placeholder="请输入手机号" type="number"></u--input>
</u-form-item>
</view>
<view class="item">
<view class="title">地区信息</view>
<districtSelector ref="districtSelectorRef"></districtSelector>
<u-form-item labelWidth="auto" label="详细地址" required prop="address" borderBottom>
<u--input v-model="formData.address" placeholder="请输入详细地址"></u--input>
</u-form-item>
</view>
<view class="item">
<view class="title">常住人口</view>
<residents ref="residentsRef"></residents>
</view>
</u--form>
<button @click="addArchives" type="primary" class="btn">创建</button>
</view>
</view>
</template>
<script>
import { upLoadImage } from "@/api/file.js"
import { loginAdd } from "@/api/oaUser.js"
import { Toast } from "../../libs/uniApi"
import districtSelector from "@/components/districtSelector/districtSelector.vue" //地区选择器
import residents from "@/components/newArchives/residents.vue" // 常住人口
export default {
components:{districtSelector, residents},
data() {
return {
formData: {
id_card: '',
sex: '',
nickname: '',
account: '', //电话
},
rules: {
account: {
required: true,
pattern: /^(1[3456789]\d{9})$/,
message: '请输入正确的手机号码',
trigger: ['change', 'blur']
},
id_card: {
required: true,
pattern: /^\d{17}[\dX]$|^\d{15}[\dX]$/,
message: '请输入正确的身份证号',
trigger: ['change', 'blur']
},
sex: {
type: 'number',
max: 1,
required: true,
message: '请选择男或女',
trigger: ['blur', 'change']
},
nickname: {
type: 'string',
required: true,
message: '姓名不能为空',
trigger: ['change', 'blur']
},
},
}
},
onLoad() {},
onShow() {},
methods: {
// 新增档案
async addArchives() {
console.log(await this.$refs.districtSelectorRef.validate());
this.$refs.uForm.validate().then(async (e) => {
if (e) {
// uni.showLoading()
// let res = await loginAdd(this.formData);
// uni.hideLoading()
// uni.showToast({
// icon: "none",
// title: "添加成功",
// success: () => {
// setTimeout(() => {
// uni.navigateBack()
// }, 1000)
// }
// })
}
})
},
},
onPullDownRefresh() {
uni.stopPullDownRefresh()
}
}
</script>
<style lang="scss">
.card {
background-color: #fff;
margin: 28rpx;
padding: 28rpx;
border-radius: 14rpx;
.item {
margin-top: 30rpx;
&:nth-child(1) {
margin-top: 0;
}
.title {
font-weight: 500;
font-size: 34rpx;
&::before {
width: 8rpx;
height: 26rpx;
border-radius: 4rpx;
background-color: #3175f9;
content: "";
display: inline-block;
margin-right: 8rpx;
}
}
}
.btn {
margin-top: 32rpx;
// margin-bottom: 40rpx;
width: 100%;
height: 84rpx;
background: $theme-oa-color;
border-radius: 42rpx 42rpx 42rpx 42rpx;
color: #fff;
line-height: 80rpx;
text-align: center;
}
}
</style>