17 changed files with 661 additions and 109 deletions
@ -0,0 +1,60 @@ |
|||||
|
<template> |
||||
|
<view v-if="list.length" class="m-4 flex flex-col"> |
||||
|
<view |
||||
|
v-for="(item, index) in list" |
||||
|
:key="index" |
||||
|
class="flex flex-nowrap text-center p-2" |
||||
|
:class="item.checked ? 'bg-blue-500 text-white' : 'bg-gray-100'" |
||||
|
@click="changeChecked(index)" |
||||
|
> |
||||
|
<view v-if="item.checked"><u-icon name="checkbox-mark"></u-icon></view> |
||||
|
<view class="flex-1">{{ item.userName }} </view> |
||||
|
<view class="flex-1" v-if="item.sex">{{ item.sex === 1 ? '男' : item.sex === 2 ? '女' : '' }}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { mapState, mapMutations } from 'vuex'; |
||||
|
|
||||
|
export default { |
||||
|
name: 'BeFamily', |
||||
|
data() { |
||||
|
return { list: [], ids: [] }; |
||||
|
}, |
||||
|
|
||||
|
watch: { |
||||
|
elderlyInfo(val) { |
||||
|
if (val && val.length) { |
||||
|
val.forEach(item => { |
||||
|
item.checked = false; |
||||
|
}); |
||||
|
this.list = val; |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
computed: mapState('yanyuan', ['elderlyInfo', 'keyUserIds']), |
||||
|
|
||||
|
methods: { |
||||
|
...mapMutations('yanyuan', ['setKeyUserIds']), |
||||
|
|
||||
|
// 选中某个复选框时，由checkbox时触发 |
||||
|
changeChecked(index) { |
||||
|
let arr = [...this.list]; |
||||
|
if (!arr[index].checked) { |
||||
|
this.ids.push(arr[index].keyUserId); |
||||
|
arr[index].checked = true; |
||||
|
} else { |
||||
|
const newIds = this.ids.filter(item => item !== arr[index].keyUserId); |
||||
|
this.ids = newIds; |
||||
|
arr[index].checked = false; |
||||
|
} |
||||
|
this.list = [...arr]; |
||||
|
this.setKeyUserIds(this.ids); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped></style> |
||||
@ -0,0 +1,60 @@ |
|||||
|
<template> |
||||
|
<view v-if="list.length" class="m-4 flex flex-col"> |
||||
|
<view |
||||
|
v-for="(item, index) in list" |
||||
|
:key="index" |
||||
|
class="flex flex-nowrap text-center p-2" |
||||
|
:class="item.checked ? 'bg-blue-500 text-white' : 'bg-gray-100'" |
||||
|
@click="changeChecked(index)" |
||||
|
> |
||||
|
<view v-if="item.checked"><u-icon name="checkbox-mark"></u-icon></view> |
||||
|
<view class="flex-1">{{ item.userName }} </view> |
||||
|
<view class="flex-1" v-if="item.sex">{{ item.sex === 1 ? '男' : item.sex === 2 ? '女' : '' }}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { mapState, mapMutations } from 'vuex'; |
||||
|
|
||||
|
export default { |
||||
|
name: 'BeFamily', |
||||
|
data() { |
||||
|
return { list: [], ids: [] }; |
||||
|
}, |
||||
|
|
||||
|
watch: { |
||||
|
elderlyInfo(val) { |
||||
|
if (val && val.length) { |
||||
|
val.forEach(item => { |
||||
|
item.checked = false; |
||||
|
}); |
||||
|
this.list = val; |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
computed: mapState('yanyuan', ['elderlyInfo', 'keyUserIds']), |
||||
|
|
||||
|
methods: { |
||||
|
...mapMutations('yanyuan', ['setKeyUserIds']), |
||||
|
|
||||
|
// 选中某个复选框时，由checkbox时触发 |
||||
|
changeChecked(index) { |
||||
|
let arr = [...this.list]; |
||||
|
if (!arr[index].checked) { |
||||
|
this.ids.push(arr[index].keyId); |
||||
|
arr[index].checked = true; |
||||
|
} else { |
||||
|
const newIds = this.ids.filter(item => item !== arr[index].keyId); |
||||
|
this.ids = newIds; |
||||
|
arr[index].checked = false; |
||||
|
} |
||||
|
this.list = [...arr]; |
||||
|
this.setKeyUserIds(this.ids); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped></style> |
||||
@ -0,0 +1,110 @@ |
|||||
|
<template> |
||||
|
<view> |
||||
|
<view class="flex flex-col text-sm border-b pb-2" v-for="(family, index) in beFamily" :key="index"> |
||||
|
<view class="flex flex-col" v-if="family.type === 4"> |
||||
|
<view class="my-3"> |
||||
|
{{ family.name }} |
||||
|
</view> |
||||
|
<u-radio-group v-model="family.value"> |
||||
|
<u-radio |
||||
|
class="mb-2" |
||||
|
@change="change($event, index, family.type)" |
||||
|
v-for="(radioItem, radioIndex) in family.radioList" |
||||
|
:key="radioIndex" |
||||
|
:name="radioItem" |
||||
|
> |
||||
|
{{ radioItem }} |
||||
|
</u-radio> |
||||
|
</u-radio-group> |
||||
|
<u-input |
||||
|
v-if="family.showOther" |
||||
|
:placeholder="`请输入其他${family.name}`" |
||||
|
v-model="family.otherValue" |
||||
|
:clearable="false" |
||||
|
@blur="change(family.otherValue, index, 99)" |
||||
|
/> |
||||
|
</view> |
||||
|
<view class="flex justify-between items-center" v-else> |
||||
|
<view class="my-3 flex justify-between items-center"> |
||||
|
{{ family.name }} |
||||
|
</view> |
||||
|
<view v-if="family.type === 1"> |
||||
|
<u-input |
||||
|
placeholder="请输入" |
||||
|
v-model="family.value" |
||||
|
:clearable="false" |
||||
|
input-align="right" |
||||
|
@blur="change(family.value, index, family.type)" |
||||
|
/> |
||||
|
</view> |
||||
|
<view v-if="family.type === 2"> |
||||
|
<u-input |
||||
|
placeholder="请输入" |
||||
|
v-model="family.value" |
||||
|
:clearable="false" |
||||
|
type="number" |
||||
|
input-align="right" |
||||
|
@blur="change(family.value, index, family.type)" |
||||
|
/> |
||||
|
</view> |
||||
|
<view v-if="family.type === 3"> |
||||
|
<u-radio-group v-model="family.value"> |
||||
|
<u-radio |
||||
|
class="mb-2" |
||||
|
@change="change($event, index, family.type)" |
||||
|
v-for="(radioItem, radioIndex) in family.radioList" |
||||
|
:key="radioIndex" |
||||
|
:name="radioItem" |
||||
|
> |
||||
|
{{ radioItem }} |
||||
|
</u-radio> |
||||
|
</u-radio-group> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { beFamily } from './config'; |
||||
|
|
||||
|
export default { |
||||
|
data() { |
||||
|
return { beFamily }; |
||||
|
}, |
||||
|
|
||||
|
mounted() {}, |
||||
|
|
||||
|
methods: { |
||||
|
change(e, index, type) { |
||||
|
const info = this.beFamily[index]; |
||||
|
switch (type) { |
||||
|
case 99: { |
||||
|
// 其他 |
||||
|
info.otherValue = e; |
||||
|
break; |
||||
|
} |
||||
|
default: |
||||
|
{ |
||||
|
info.value = e; |
||||
|
if (e === '男') { |
||||
|
info.value = 1; |
||||
|
} |
||||
|
if (e === '女') { |
||||
|
info.value = 2; |
||||
|
} |
||||
|
if (e === '其他') { |
||||
|
info.showOther = true; |
||||
|
} else { |
||||
|
info.showOther = false; |
||||
|
} |
||||
|
} |
||||
|
break; |
||||
|
} |
||||
|
this.$emit('saveInfo', info); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped></style> |
||||
@ -1,18 +0,0 @@ |
|||||
<template> |
|
||||
<view> 老人列表 </view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
export default { |
|
||||
name: 'BeFamily', |
|
||||
data() { |
|
||||
return {}; |
|
||||
}, |
|
||||
|
|
||||
mounted() {}, |
|
||||
|
|
||||
methods: {}, |
|
||||
}; |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped></style> |
|
||||
@ -0,0 +1,75 @@ |
|||||
|
<template> |
||||
|
<view class="px-3"> |
||||
|
<u-top-tips ref="uTips" type="success"></u-top-tips> |
||||
|
<ApplyFamily @saveInfo="saveInfo"></ApplyFamily> |
||||
|
<u-button type="primary" class="m-4" @click="submit">提交</u-button> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { mapState, mapMutations } from 'vuex'; |
||||
|
import ApplyFamily from 'components/ConfigInfo/components/ApplyFamily'; |
||||
|
import { beFamily } from 'components/ConfigInfo/components/config'; |
||||
|
import toolMixin from '@/mixins/tool'; |
||||
|
|
||||
|
export default { |
||||
|
components: { ApplyFamily }, |
||||
|
mixins: [toolMixin], |
||||
|
data() { |
||||
|
return { beFamily, params: {} }; |
||||
|
}, |
||||
|
|
||||
|
computed: mapState('yanyuan', ['keyUserIds']), |
||||
|
|
||||
|
mounted() {}, |
||||
|
|
||||
|
methods: { |
||||
|
...mapMutations('yanyuan', ['setApplyFamilyInfo']), |
||||
|
|
||||
|
// 填写用户信息 |
||||
|
saveInfo(info) { |
||||
|
this.params[info.label] = info.value; |
||||
|
// 其他 |
||||
|
if (info.value === '其他' && info.showOther && info.otherValue) { |
||||
|
this.params[info.label] = info.otherValue; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 申请成为家属 |
||||
|
*/ |
||||
|
submit() { |
||||
|
if (!this.validationRequired()) return; |
||||
|
this.params.keyUserIds = this.keyUserIds; |
||||
|
this.setApplyFamilyInfo(this.params); |
||||
|
this.$refs.uTips.show({ |
||||
|
title: '用户信息添加成功, 即将申请成为家属', |
||||
|
type: 'success', |
||||
|
duration: '2000', |
||||
|
}); |
||||
|
this.$t.page.openPage('/pagesYanyuan/transfer-page/transfer-page?type=jiashu'); |
||||
|
}, |
||||
|
|
||||
|
// 验证必填 |
||||
|
validationRequired() { |
||||
|
let isComplete = true; |
||||
|
for (let i = 0; i < this.beFamily.length; i++) { |
||||
|
const item = this.beFamily[i]; |
||||
|
if (!item.value) { |
||||
|
this.$t.ui.showToast(`请填写${item.name}`); |
||||
|
isComplete = false; |
||||
|
break; |
||||
|
} |
||||
|
if (item.showOther && !item.otherValue) { |
||||
|
this.$t.ui.showToast(`请填写其他${item.name}`); |
||||
|
isComplete = false; |
||||
|
break; |
||||
|
} |
||||
|
} |
||||
|
if (isComplete) return true; |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped></style> |
||||
@ -1,8 +1,13 @@ |
|||||
/* eslint-disable */ |
/* eslint-disable */ |
||||
const state = { |
const state = { |
||||
isBinding: false, // 工具箱是否被绑定
|
|
||||
toolInfo: {}, // 绑定过的工具箱信息
|
toolInfo: {}, // 绑定过的工具箱信息
|
||||
elderlyInfo: {}, // 用户创建的老人信息
|
elderlyInfo: [], // 用户创建的老人信息
|
||||
|
showChooseElder: false, // 显示选择老人弹框
|
||||
|
personalInfo: {}, // 个人信息
|
||||
|
isApplying: false, // 是否正在申请成为家属
|
||||
|
keyUserIds: [], // 所选老人的id
|
||||
|
applyFamilyInfo: {}, // 申请家属信息
|
||||
|
showSetUser: false, // 显示设置使用者弹框
|
||||
}; |
}; |
||||
|
|
||||
export default state; |
export default state; |
||||
|
|||||
Loading…
Reference in new issue