网格调整完毕
This commit is contained in:
aixianling
28
src/components/AiGap.vue
Normal file
28
src/components/AiGap.vue
Normal file
@@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<section class="AiGap" :style="{height,width}"/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "AiGap",
|
||||
props: {
|
||||
h: {default: 30},
|
||||
w: {default: '100%'}
|
||||
},
|
||||
computed: {
|
||||
height() {
|
||||
let {h} = this
|
||||
return /\d/.test(h) ? `${h}rpx` : h
|
||||
},
|
||||
width() {
|
||||
let {w} = this
|
||||
return /\d/.test(w) ? `${w}rpx` : w
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.AiGap {
|
||||
}
|
||||
</style>
|
||||
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<section class="AiItem">
|
||||
<section class="AiItem" :class="{border}">
|
||||
<div v-if="topLabel" class="topLabel">
|
||||
<div class="labelPane" flex>
|
||||
<div class="label" :class="{required}" v-text="label"/>
|
||||
<div class="label" :class="{required,labelBold}" v-text="label"/>
|
||||
<slot name="sub" v-if="$slots.sub"/>
|
||||
</div>
|
||||
<div class="content">
|
||||
@@ -12,11 +12,13 @@
|
||||
</div>
|
||||
<div v-else class="normal" flex>
|
||||
<div class="fill" flex>
|
||||
<div class="label" :class="{required}" v-text="label"/>
|
||||
<div class="label" :class="{required,labelBold}" v-text="label"/>
|
||||
<slot name="sub" v-if="$slots.sub"/>
|
||||
</div>
|
||||
<slot v-if="$slots.default"/>
|
||||
<div v-else v-text="value"/>
|
||||
<div class="flexContent">
|
||||
<slot v-if="$slots.default"/>
|
||||
<div v-else v-text="value"/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
@@ -28,7 +30,9 @@ export default {
|
||||
value: {default: ""},
|
||||
label: {default: ""},
|
||||
required: Boolean,
|
||||
topLabel: Boolean
|
||||
topLabel: Boolean,
|
||||
border: {default: true},
|
||||
labelBold: Boolean
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
@@ -40,12 +44,25 @@ export default {
|
||||
.AiItem {
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
|
||||
.border {
|
||||
.normal {
|
||||
border-bottom: 2px solid #ddd;
|
||||
}
|
||||
|
||||
.topLabel {
|
||||
border-bottom: 2px solid #ddd;
|
||||
}
|
||||
}
|
||||
|
||||
.normal {
|
||||
width: 100%;
|
||||
border-bottom: 2px solid #ddd;
|
||||
padding-right: 32px;
|
||||
box-sizing: border-box;
|
||||
height: 112px;
|
||||
|
||||
.flexContent {
|
||||
max-width: 62vw;
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
@@ -64,11 +81,15 @@ export default {
|
||||
content: "*";
|
||||
color: #f46;
|
||||
}
|
||||
|
||||
&.labelBold {
|
||||
font-weight: bold;
|
||||
font-size: 34px;
|
||||
}
|
||||
}
|
||||
|
||||
.topLabel {
|
||||
::v-deep.topLabel {
|
||||
padding: 32px 32px 32px 0;
|
||||
border-bottom: 2px solid #ddd;
|
||||
|
||||
.labelPane {
|
||||
margin-bottom: 32px;
|
||||
@@ -76,6 +97,10 @@ export default {
|
||||
|
||||
.content {
|
||||
padding-left: 20px;
|
||||
|
||||
.AiMore > .u-icon {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -28,7 +28,7 @@ export default {
|
||||
return {
|
||||
configList: {
|
||||
resident: {url: "/components/pages/selectResident", label: "name"},
|
||||
sysUser:{url: "/components/pages/selectSysUser", label: "name"},
|
||||
sysUser: {url: "/components/pages/selectSysUser", label: "name"},
|
||||
gird: {url: "/components/pages/selectGird", label: "girdName"},
|
||||
party: {url: "/components/pages/selectParty", label: "name"},
|
||||
custom: {...this.ops}
|
||||
@@ -56,7 +56,7 @@ export default {
|
||||
})
|
||||
let url = `${config.url}`,
|
||||
qsstr = qs.stringify({
|
||||
selected, ...this.$attrs
|
||||
selected, nodeKey, ...this.$attrs
|
||||
})
|
||||
if (!!qsstr) {
|
||||
url += `?${qsstr}`
|
||||
|
||||
30
src/components/AiPhone.vue
Normal file
30
src/components/AiPhone.vue
Normal file
@@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<section class="AiPhone">
|
||||
<img :src="$cdn + 'common/phone.png'" alt="" @click="callPhone(phone)" class="phone-icon" v-if="phone"/>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "AiPhone",
|
||||
props: {
|
||||
phone: {default: ""}
|
||||
},
|
||||
methods: {
|
||||
callPhone(phoneNumber) {
|
||||
uni.makePhoneCall({phoneNumber})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.AiPhone {
|
||||
.phone-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
vertical-align: sub;
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -48,6 +48,9 @@ export default {
|
||||
...mapState(['user']),
|
||||
isSingle() {
|
||||
return this.$route.query.single
|
||||
},
|
||||
nodeKey() {
|
||||
return this.$route.query.nodeKey || "idNumber"
|
||||
}
|
||||
},
|
||||
onLoad(query) {
|
||||
@@ -67,7 +70,7 @@ export default {
|
||||
if (res?.data) {
|
||||
this.total = res.data.pages || 0
|
||||
res.data.records.forEach(e => {
|
||||
e.isCheck = this.selected.includes(e.idNumber)
|
||||
e.isCheck = this.selected.includes(e[this.nodeKey])
|
||||
})
|
||||
this.list = [current == 1 ? [] : this.list, res.data.records || []].flat()
|
||||
}
|
||||
|
||||
@@ -1,42 +1,31 @@
|
||||
<template>
|
||||
<div class="AddGird">
|
||||
<div class="item-flex">
|
||||
<div class="label">
|
||||
<span class="tips">*</span>网格名称
|
||||
</div>
|
||||
<div class="value">
|
||||
<u-input type="text" placeholder="请输入" input-align="right" placeholder-style="color:#999;font-size:16px;" height="48" v-model="form.girdName" maxlength="50" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-flex">
|
||||
<div class="label">
|
||||
<span class="tips"></span>网格长
|
||||
</div>
|
||||
<div class="value" @click="toAddUser('manage')">
|
||||
|
||||
<span v-if="form.girdMemberManageList && form.girdMemberManageList.length">
|
||||
<span v-for="(item, index) in form.girdMemberManageList" :key="index"><span v-if="index>0">,</span>{{item.name}}</span>
|
||||
</span>
|
||||
<span style="color:#999;" v-else>请选择</span>
|
||||
<img src="./components/img/right-icon.png" alt="" /></div>
|
||||
</div>
|
||||
<div class="item-flex" v-if="form.girdLevel == 2">
|
||||
<div class="label">
|
||||
<span class="tips"></span>网格员
|
||||
</div>
|
||||
<div class="value" @click="toAddUser('Member')">
|
||||
<span v-if="form.girdMemberList && form.girdMemberList.length">
|
||||
<span v-for="(item, index) in form.girdMemberList" :key="index"><span v-if="index>0">,</span>{{item.name}}</span>
|
||||
</span>
|
||||
<span style="color:#999;" v-else>请选择</span>
|
||||
<img src="./components/img/right-icon.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer" @click="confirm">确认添加</div>
|
||||
<AiGroup>
|
||||
<AiItem label="网格名称" required>
|
||||
<u-input type="text" placeholder="请输入" input-align="right" placeholder-style="color:#999;font-size:16px;" height="48" v-model="form.girdName"
|
||||
maxlength="50"/>
|
||||
</AiItem>
|
||||
</AiGroup>
|
||||
<AiGroup>
|
||||
<AiItem label="网格长" topLabel>
|
||||
<AiPagePicker type="sysUser" :selected.sync="form.girdMemberManageList" action="/app/wxcp/wxuser/list?status=1" nodeKey="id">
|
||||
<AiMore :value="getArrayLabel(form.girdMemberManageList)"/>
|
||||
</AiPagePicker>
|
||||
</AiItem>
|
||||
</AiGroup>
|
||||
<AiGroup>
|
||||
<AiItem label="网格员" topLabel>
|
||||
<AiPagePicker type="sysUser" :selected.sync="form.girdMemberList" action="/app/wxcp/wxuser/list?status=1" nodeKey="id">
|
||||
<AiMore :value="getArrayLabel(form.girdMemberList)"/>
|
||||
</AiPagePicker>
|
||||
</AiItem>
|
||||
</AiGroup>
|
||||
<div class="footer" @click="confirm">{{ fromType == 'add' ? '确认添加' : '确认修改' }}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
@@ -47,98 +36,71 @@ export default {
|
||||
},
|
||||
detailInfo: {},
|
||||
fromType: 'add', //add新增 edit编辑,
|
||||
addUserType: 'manage', //manage网格长 Member管理员
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
},
|
||||
onLoad(option) {
|
||||
this.id = option.id
|
||||
this.fromType = option.fromType
|
||||
this.getDetail()
|
||||
uni.$on('selectUser', res => {
|
||||
if(this.addUserType == 'manage') {
|
||||
this.form.girdMemberManageList = res
|
||||
}else {
|
||||
this.form.girdMemberList = res
|
||||
}
|
||||
})
|
||||
},
|
||||
onShow() {
|
||||
document.title = '添加网格'
|
||||
if (this.fromType == 'add') {
|
||||
document.title = '添加网格'
|
||||
} else {
|
||||
document.title = '编辑网格'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getDetail() {
|
||||
this.$http.post(`/app/appgirdinfo/queryDetailById?id=${this.id}`).then((res) => {
|
||||
if (res.code == 0) {
|
||||
if (res?.data) {
|
||||
this.detailInfo = res.data
|
||||
if(this.fromType == 'edit') {
|
||||
if (this.fromType == 'edit') {
|
||||
this.form = res.data
|
||||
}
|
||||
if(this.fromType == 'add') {
|
||||
if (this.fromType == 'add') {
|
||||
this.form.parentGirdId = this.detailInfo.id
|
||||
this.form.parentGirdName = this.detailInfo.girdName
|
||||
this.form.girdLevel = Number(this.detailInfo.girdLevel)+1
|
||||
this.form.girdType = Number(this.detailInfo.girdType)+1
|
||||
this.form.isLastLevel = this.form.girdLevel == 2 ? '1' : '0'
|
||||
this.$forceUpdate()
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
toAddUser(type) {
|
||||
this.addUserType = type
|
||||
var selectUserList = []
|
||||
if(type == 'manage') {
|
||||
selectUserList = this.form.girdMemberManageList
|
||||
}else {
|
||||
selectUserList = this.form.girdMemberList
|
||||
}
|
||||
uni.setStorageSync('selectUserList', selectUserList)
|
||||
uni.navigateTo({url: `./SelectUser`})
|
||||
},
|
||||
confirm() {
|
||||
if(!this.form.girdName){
|
||||
if (!this.form.girdName) {
|
||||
return this.$u.toast('请输入网格名称')
|
||||
}
|
||||
|
||||
var girdMemberManageList = []
|
||||
if(this.form.girdMemberManageList && this.form.girdMemberManageList.length) {
|
||||
girdMemberManageList = this.form.girdMemberManageList.map((item) => {
|
||||
return {
|
||||
wxUserId: item.id,
|
||||
phone: item.mobile,
|
||||
photo: item.avatar,
|
||||
name: item.name
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
var girdMemberList = []
|
||||
if(this.form.girdMemberList && this.form.girdMemberList.length) {
|
||||
girdMemberList = this.form.girdMemberList.map((item) => {
|
||||
return {
|
||||
wxUserId: item.id,
|
||||
phone: item.mobile,
|
||||
photo: item.avatar,
|
||||
name: item.name
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
let girdMemberManageList = this.form.girdMemberManageList?.map((item) => {
|
||||
return {
|
||||
wxUserId: item.id,
|
||||
phone: item.mobile,
|
||||
photo: item.avatar,
|
||||
name: item.name
|
||||
}
|
||||
})
|
||||
let girdMemberList = this.form.girdMemberList?.map((item) => {
|
||||
return {
|
||||
wxUserId: item.id,
|
||||
phone: item.mobile,
|
||||
photo: item.avatar,
|
||||
name: item.name
|
||||
}
|
||||
})
|
||||
this.$http.post(`/app/appgirdinfo/addOrUpdateByEw`, {...this.form, girdMemberManageList, girdMemberList}).then((res) => {
|
||||
if (res.code == 0) {
|
||||
if (res?.code == 0) {
|
||||
this.$u.toast('提交成功')
|
||||
uni.$emit('update')
|
||||
setTimeout(() => {
|
||||
uni.navigateBack()
|
||||
uni.navigateBack({})
|
||||
}, 600)
|
||||
}
|
||||
}).catch((err) => {
|
||||
this.$u.toast(err)
|
||||
})
|
||||
|
||||
},
|
||||
getArrayLabel(arr, key = 'name', separation = '，') {
|
||||
return arr?.map(e => e[key])?.join(separation)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -146,42 +108,47 @@ export default {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.AddGird {
|
||||
.item-flex{
|
||||
.item-flex {
|
||||
display: flex;
|
||||
padding: 34px 32px;
|
||||
background-color: #fff;
|
||||
font-size: 32px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
margin-bottom: 16px;
|
||||
.label{
|
||||
|
||||
.label {
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
line-height: 22px;
|
||||
width: 150px;
|
||||
.tips{
|
||||
|
||||
.tips {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
color: #F46;
|
||||
line-height: 44px;
|
||||
}
|
||||
}
|
||||
.value{
|
||||
|
||||
.value {
|
||||
width: calc(100% - 150px);
|
||||
line-height: 44px;
|
||||
text-align: right;
|
||||
color: #666;
|
||||
img{
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
|
||||
img {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
vertical-align: middle;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
.color-999{
|
||||
|
||||
.color-999 {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
.footer{
|
||||
|
||||
.footer {
|
||||
width: 100%;
|
||||
height: 112px;
|
||||
line-height: 112px;
|
||||
|
||||
@@ -1,24 +1,26 @@
|
||||
<template>
|
||||
<div class="AppGridManagement">
|
||||
<!-- <div class="header" v-if="component != 'Map' && isAdmin"> -->
|
||||
<div class="pad-t32" v-if="component != 'Map' && isAdmin"></div>
|
||||
<div class="select-gird" v-if="component != 'Map' && isAdmin">
|
||||
<img src="./components/img/gird-icon.png" alt="" class="gird-icon">
|
||||
<div @click="linkTo('./SelectGird')">
|
||||
{{ params.girdName }}
|
||||
<img src="./components/img/down-icon.png" alt="" class="down-icon">
|
||||
<template v-if="isGridMember">
|
||||
<div class="pad-t32" v-if="component != 'Map'"/>
|
||||
<div class="select-gird" v-if="component != 'Map'" flex>
|
||||
<AiPagePicker type="custom" class="fill" @select="handleSelectGird"
|
||||
:ops="{url:'./SelectGird',label: 'girdName'}">
|
||||
<div flex>
|
||||
<img src="./components/img/gird-icon.png" alt="" class="gird-icon">
|
||||
<AiMore v-model="params.girdName" icon="arrow-down"/>
|
||||
</div>
|
||||
</AiPagePicker>
|
||||
<span @click="linkTo('./SetGird?id='+params.id)" v-if="isGridAdmin">网格配置</span>
|
||||
</div>
|
||||
<span @click="linkTo('./SetGird')" v-if="checkType == 2">网格配置</span>
|
||||
</div>
|
||||
<!-- </div> -->
|
||||
<component v-if="refresh && isAdmin" :is="component" @change="onChange" :params="params"></component>
|
||||
<div class="tabs" v-if="isTab && isAdmin">
|
||||
<div class="item" @click="tabClick(index, item.component)" v-for="(item, index) in tabs" :key="index">
|
||||
<img :src="tabIndex == index ? item.activeImg : item.img" alt=""/>
|
||||
<p :class="tabIndex == index ? 'color-3267F0' : ''">{{ item.text }}</p>
|
||||
<component v-if="refresh" :is="component" @change="onChange" :params="params"/>
|
||||
<div class="tabs" v-if="isTab">
|
||||
<div class="item" @click="tabClick(index, item.component)" v-for="(item, index) in tabs" :key="index">
|
||||
<img :src="tabIndex == index ? item.activeImg : item.img" alt=""/>
|
||||
<p :class="{'color-3267F0':tabIndex == index}" v-text="item.text"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!isAdmin" class="empty">
|
||||
</template>
|
||||
<div v-if="!isGridMember" class="empty">
|
||||
<img src="./components/img/no-admin.png" alt="">
|
||||
<p>没有网格员权限<br/>无法查看网格信息哦~</p>
|
||||
<div class="add-btn" @click="linkTo('./AddUser')">网格员信息申报</div>
|
||||
@@ -30,11 +32,11 @@
|
||||
import Statistics from './Statistics.vue'
|
||||
import Organization from './Organization.vue'
|
||||
import Map from './Map.vue'
|
||||
import {mapState} from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'AppGridManagement',
|
||||
appName: '网格管理(新)',
|
||||
|
||||
data() {
|
||||
return {
|
||||
component: 'Statistics',
|
||||
@@ -62,48 +64,48 @@ export default {
|
||||
}
|
||||
],
|
||||
isTab: true,
|
||||
isAdmin: false,
|
||||
checkType: 0,
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
isGridMember() {
|
||||
return this.user.girdCheckType > 0
|
||||
},
|
||||
isGridAdmin() {
|
||||
return this.user.girdCheckType == 2
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Organization,
|
||||
Statistics,
|
||||
Map,
|
||||
},
|
||||
|
||||
methods: {
|
||||
onChange(e) {
|
||||
this.params = e.params
|
||||
this.component = e.type
|
||||
},
|
||||
tabClick(index, component) {
|
||||
this.tabIndex = index
|
||||
this.component = component
|
||||
refreshHome() {
|
||||
this.refresh = false
|
||||
this.$nextTick(() => {
|
||||
this.refresh = true
|
||||
})
|
||||
},
|
||||
isGirdUser() {
|
||||
this.isAdmin = false
|
||||
this.$http.post('/app/appgirdmemberinfo/checkLogOnUser').then((res) => {
|
||||
if (res.code == 0) {
|
||||
if (res.data.checkType != '0') {
|
||||
this.isAdmin = true
|
||||
this.checkType = res.data.checkType
|
||||
this.params = res.data.appGirdInfo
|
||||
}
|
||||
}
|
||||
})
|
||||
tabClick(index, component) {
|
||||
this.tabIndex = index
|
||||
this.component = component
|
||||
this.refreshHome();
|
||||
},
|
||||
linkTo(url) {
|
||||
uni.navigateTo({url})
|
||||
},
|
||||
handleSelectGird(v) {
|
||||
this.params = v || {}
|
||||
this.refreshHome()
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
document.title = '网格管理'
|
||||
onLoad() {
|
||||
this.handleSelectGird(this.user.gridInfo)
|
||||
uni.$on('hideTab', () => {
|
||||
this.isTab = false
|
||||
})
|
||||
@@ -111,14 +113,8 @@ export default {
|
||||
this.isTab = true
|
||||
})
|
||||
},
|
||||
onLoad() {
|
||||
this.isGirdUser()
|
||||
uni.$on('goback', (res) => {
|
||||
this.params = res
|
||||
})
|
||||
uni.$on('updateGird', (res) => {
|
||||
this.isGirdUser()
|
||||
})
|
||||
onShow() {
|
||||
document.title = '网格管理'
|
||||
},
|
||||
onReachBottom() {
|
||||
if (!this.tabIndex) {
|
||||
@@ -137,12 +133,8 @@ export default {
|
||||
padding-top: 32px;
|
||||
}
|
||||
|
||||
.header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 9;
|
||||
width: 100%;
|
||||
.gird-icon {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.select-gird {
|
||||
@@ -159,22 +151,6 @@ export default {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
div {
|
||||
display: inline-block;
|
||||
width: calc(100% - 144px);
|
||||
padding-left: 20px;
|
||||
box-sizing: border-box;
|
||||
font-size: 32px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
line-height: 48px;
|
||||
|
||||
img {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 112px;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="FamilyList">
|
||||
<div class="title">
|
||||
<div>户主列表</div>
|
||||
<div>户主列表({{ total }})</div>
|
||||
<div v-if="list.length">
|
||||
<span style="font-size: 14px; color: #2979ff;" @click="changeType" v-if="edit">修改</span>
|
||||
<span style="font-size: 14px; color: #2979ff;" @click="edit = true" v-else>取消</span>
|
||||
@@ -11,7 +11,7 @@
|
||||
<ul v-for="(item,index) in list" :key="index">
|
||||
<li>
|
||||
<div class="user">
|
||||
<div v-if="!edit">
|
||||
<div v-if="!edit">
|
||||
<img src="./components/img/xz.png" alt="" class="checkbox" v-if="!item.checked" @click="userClick(index)">
|
||||
<img src="./components/img/xzh.png" alt="" class="checkbox" v-else @click="userClick(index)">
|
||||
</div>
|
||||
@@ -22,11 +22,11 @@
|
||||
</div>
|
||||
<div class="userInfo">
|
||||
<div class="name">
|
||||
<span class="user-name">{{item.name}}</span>
|
||||
<span class="user-tel">{{item.phone}}</span>
|
||||
<span class="user-name">{{ item.name }}</span>
|
||||
<span class="user-tel">{{ item.phone }}</span>
|
||||
</div>
|
||||
<div class="idCard">{{item.idNumber && item.idNumber.replace(/(.{6}).*(.{4})/,"$1********$2")}}</div>
|
||||
<div class="address">{{item.currentAreaName || ''}}{{ item.currentAddress || '' }}</div>
|
||||
<div class="idCard">{{ item.idNumber && item.idNumber.replace(/(.{6}).*(.{4})/, "$1********$2") }}</div>
|
||||
<div class="address">{{ item.currentAreaName || '' }}{{ item.currentAddress || '' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -44,8 +44,9 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list:[],
|
||||
current:1,
|
||||
list: [],
|
||||
total: 0,
|
||||
current: 1,
|
||||
userId: '',
|
||||
edit: true,
|
||||
checked: true,
|
||||
@@ -53,14 +54,15 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getList(){
|
||||
this.$http.post(`/app/appgirdmemberresident/listByGirdMember?current=${this.current}&girdMemberId=${this.userId}&girdId=${this.girdId}`).then((res) => {
|
||||
getList() {
|
||||
this.$http.post(`/app/appgirdmemberresident/listByGirdMember?current=${this.current}&girdMemberId=${this.userId}&girdId=${this.girdId}`).then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.list = this.current > 1 ? [...this.list, ...res.data.records] : res.data.records
|
||||
this.list = this.current > 1 ? [...this.list, ...res.data.records] : res.data.records
|
||||
this.total = res.data.total
|
||||
}
|
||||
})
|
||||
},
|
||||
toAddFamily(){
|
||||
toAddFamily() {
|
||||
uni.navigateTo({url: `./AddFamily?id=${this.userId}&girdId=${this.girdId}`})
|
||||
},
|
||||
userClick(index) {
|
||||
@@ -68,14 +70,14 @@ export default {
|
||||
this.$forceUpdate()
|
||||
},
|
||||
// 点击删除
|
||||
delFamily(){
|
||||
delFamily() {
|
||||
var ids = []
|
||||
this.list.map((item) => {
|
||||
if(item.checked) {
|
||||
if (item.checked) {
|
||||
ids.push(item.gmrId)
|
||||
}
|
||||
})
|
||||
if(!ids.length) {
|
||||
if (!ids.length) {
|
||||
return this.$u.toast('请选中需要删除的家庭户主')
|
||||
}
|
||||
this.$confirm(`是否删除这些关联家庭信息？`).then(() => {
|
||||
@@ -117,78 +119,93 @@ export default {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.FamilyList {
|
||||
min-height: 100vh;
|
||||
.title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 24px 32px;
|
||||
background-color: #F3F6F9;
|
||||
background-color: #fff;
|
||||
font-size: 34px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.main {
|
||||
padding-bottom: 112px;
|
||||
|
||||
ul {
|
||||
padding-left: 32px;
|
||||
background-color: #fff;
|
||||
|
||||
li {
|
||||
list-style-type: none;
|
||||
.user {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
padding-top: 24px;
|
||||
.checkbox{
|
||||
margin-top: 20px;
|
||||
margin-right: 32px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
.info {
|
||||
list-style-type: none;
|
||||
|
||||
.user {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
.userImg {
|
||||
margin-right: 32px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.userInfo {
|
||||
width: 100%;
|
||||
padding-right: 32px;
|
||||
border-bottom: 1px solid #E4E5E6;
|
||||
.name {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 32px;
|
||||
margin-bottom: 8px;
|
||||
.user-name {
|
||||
font-weight: 800;
|
||||
}
|
||||
.user-tel {
|
||||
font-size: 26px;
|
||||
color: #999999 ;
|
||||
}
|
||||
}
|
||||
.idCard {
|
||||
margin-bottom: 16px;
|
||||
font-size: 26px;
|
||||
color: #999999;
|
||||
}
|
||||
.address {
|
||||
max-width: 100%;
|
||||
word-break:break-all;
|
||||
margin-bottom: 18px;
|
||||
font-size: 26px;
|
||||
color: #999999;
|
||||
}
|
||||
padding-top: 24px;
|
||||
|
||||
.checkbox {
|
||||
margin-top: 20px;
|
||||
margin-right: 32px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.info {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
|
||||
.userImg {
|
||||
margin-right: 32px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.userInfo {
|
||||
width: 100%;
|
||||
padding-right: 32px;
|
||||
border-bottom: 1px solid #E4E5E6;
|
||||
|
||||
.name {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 32px;
|
||||
margin-bottom: 8px;
|
||||
|
||||
.user-name {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.user-tel {
|
||||
font-size: 26px;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
.idCard {
|
||||
margin-bottom: 16px;
|
||||
font-size: 26px;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.address {
|
||||
max-width: 100%;
|
||||
word-break: break-all;
|
||||
margin-bottom: 18px;
|
||||
font-size: 26px;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer{
|
||||
|
||||
.footer {
|
||||
position: fixed;
|
||||
left: 0px;
|
||||
bottom: 0px;
|
||||
|
||||
@@ -1,11 +1,16 @@
|
||||
<template>
|
||||
<div class="map">
|
||||
<div class="detail">
|
||||
<div class="grid-select">
|
||||
<span class="label">网格选择</span>
|
||||
<div class="grid-select__right" @click="toChoose">
|
||||
<span>{{ form.girdName || '请选择' }}</span>
|
||||
<u-icon name="arrow-right" color="#cccccc" size="30" style="margin-left:8px;"></u-icon>
|
||||
</div>
|
||||
<AiPagePicker type="custom" class="fill" @select="handleSelectGird"
|
||||
:ops="{url:'./SelectGird',label: 'girdName'}">
|
||||
<div class="gird-content">
|
||||
<div class="label">网格选择</div>
|
||||
<div class="grid-select__right">
|
||||
<span>{{ form.girdName || '请选择' }}</span>
|
||||
<u-icon name="arrow-right" color="#cccccc" size="26" style="margin-left:4px;"></u-icon>
|
||||
</div>
|
||||
</div>
|
||||
</AiPagePicker>
|
||||
</div>
|
||||
<div class="map-content">
|
||||
<AiTMap ref="AiTMap" :map.sync="map" :lib.sync="lib" :libraries="['geometry','service', 'tools']"/>
|
||||
@@ -14,23 +19,13 @@
|
||||
<div class="popup">
|
||||
<div class="bg"></div>
|
||||
<div class="title">{{ form.girdName }}</div>
|
||||
<scroll-view scroll-y="true" class="grid-info">
|
||||
<div class="info-flex">
|
||||
<span class="label">网格类型</span>
|
||||
<span class="value">{{ $dict.getLabel('girdType', form.girdType) }}</span>
|
||||
</div>
|
||||
<div class="info-flex">
|
||||
<span class="label">网格层级</span>
|
||||
<span class="value">{{ $dict.getLabel('girdLevel', form.girdLevel) }}</span>
|
||||
</div>
|
||||
<div v-if="form.girdMemberManageList && form.girdMemberManageList.length">
|
||||
<div class="info-flex" v-for="(item, index) in form.girdMemberManageList" :key="index">
|
||||
<span class="label">网格长</span>
|
||||
<span class="value">{{ item.name }} {{ item.phone }}
|
||||
<img :src="$cdn + 'common/phone.png'" alt="" @click="callPhone(item.phone)" class="phone-icon"
|
||||
v-if="item.phone">
|
||||
</span>
|
||||
</div>
|
||||
<scroll-view scroll-y="true" class="grid-info">
|
||||
<div class="info-flex" v-for="(item, index) in form.girdMemberManageList" :key="index">
|
||||
<span class="label">网格长</span>
|
||||
<span class="value">
|
||||
{{ [item.name,item.phone].join(" ") }}
|
||||
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="form.girdMemberList && form.girdMemberList.length">
|
||||
<div class="info-flex" v-for="(item, index) in form.girdMemberList" :key="index">
|
||||
@@ -68,16 +63,10 @@ export default {
|
||||
},
|
||||
computed: {...mapState(['user', 'config'])},
|
||||
created() {
|
||||
this.$dict.load('girdType', 'girdLevel')
|
||||
this.$dict.load('girdType')
|
||||
this.areaId = this.user.areaId
|
||||
// this.getLeafNodes()
|
||||
uni.$on('goback', e => {
|
||||
if (e.girdLevel == '0') {
|
||||
setTimeout(() => {
|
||||
this.$u.toast('请选择二级或者三级网格')
|
||||
}, 400)
|
||||
return false
|
||||
}
|
||||
this.getGridList(e.id, true)
|
||||
})
|
||||
},
|
||||
@@ -94,14 +83,14 @@ export default {
|
||||
getLeafNodes() {
|
||||
this.$http.post(`/app/appgirdinfo/queryGirdMemberGirdsById`).then((res) => {
|
||||
if (res?.data) {
|
||||
this.treeList = res.data.filter(v => v.girdLevel === '2')
|
||||
this.treeList = res.data
|
||||
|
||||
const arr = res.data.filter(v => v.points).map(e => {
|
||||
return {
|
||||
id: e.id,
|
||||
girdName: e.girdName,
|
||||
points: e.points.map(p => [p.lng, p.lat])
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
arr.length > 0 && this.renderGridMap(arr)
|
||||
@@ -121,7 +110,6 @@ export default {
|
||||
points: v.points ? v.points.map(p => [p.lng, p.lat]) : []
|
||||
}
|
||||
})
|
||||
|
||||
this.renderGridMap(arr)
|
||||
}
|
||||
}).catch(() => {
|
||||
@@ -142,7 +130,7 @@ export default {
|
||||
girdName: res.data.girdName,
|
||||
points: res.data.points.map(p => [p.lng, p.lat])
|
||||
}]
|
||||
|
||||
|
||||
this.renderGridMap(arr)
|
||||
}
|
||||
|
||||
@@ -262,17 +250,9 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep uni-page-body {
|
||||
.detail {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
ai-tree-picker {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.map {
|
||||
height: 100%;
|
||||
height: calc(100% - 98px);
|
||||
.grid-select {
|
||||
width: 100%;
|
||||
padding: 34px 32px;
|
||||
@@ -282,14 +262,15 @@ ai-tree-picker {
|
||||
justify-content: space-between;
|
||||
line-height: 44px;
|
||||
color: #333;
|
||||
// position: fixed;
|
||||
// top: 0;
|
||||
// left: 0;
|
||||
// z-index: 999;
|
||||
|
||||
.grid-select__right {
|
||||
width: calc(100% - 140px);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.gird-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.label {
|
||||
@@ -309,7 +290,7 @@ ai-tree-picker {
|
||||
|
||||
.map-content {
|
||||
width: 100%;
|
||||
height: calc(100% - 115px);
|
||||
height: calc(100% - 210px);
|
||||
}
|
||||
|
||||
.popup {
|
||||
@@ -343,8 +324,8 @@ ai-tree-picker {
|
||||
line-height: 40px;
|
||||
font-size: 28px;
|
||||
|
||||
&:last-child {
|
||||
border: none;
|
||||
&:last-of-type {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.label {
|
||||
@@ -357,22 +338,11 @@ ai-tree-picker {
|
||||
.value {
|
||||
color: #666;
|
||||
font-size: 26px;
|
||||
|
||||
.phone-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
vertical-align: sub;
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.grid-name {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.footer {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
|
||||
@@ -2,37 +2,39 @@
|
||||
<div class="SelectGird">
|
||||
<div class="header-middle">
|
||||
<div class="hint">
|
||||
<span v-for="(item, index) in slectList" :key="index"><span v-if="index" style="margin:0 4px;">/</span><span style="color:#3F8DF5" @click="girdNameClick(item, index)">{{item.girdName}}</span></span>
|
||||
<AiGap/>
|
||||
<span v-for="(item, index) in slectList" :key="index">
|
||||
<span v-if="index" style="margin:0 4px;" v-text="`/`"/>
|
||||
<span style="color:#3F8DF5" @click="girdNameClick(item, index)" v-text="item.girdName"/>
|
||||
</span>
|
||||
</div>
|
||||
<div class="showTypes">
|
||||
<div v-if="treeList.length > 0">
|
||||
<div class="cards" v-for="(item, index) in treeList" :key="index" @click="itemClick(item)">
|
||||
<div class="imges">
|
||||
<span>
|
||||
<img src="./components/img/xzh.png" alt="" class="imgselect" v-if="item.isChecked" @click.stop="girdClick(item, index)" />
|
||||
<img src="./components/img/xz.png" alt="" class="imgselect" v-else @click.stop="girdClick(item, index)" />
|
||||
</span>
|
||||
<img src="./components/img/gird--select-icon.png" alt="" class="avatras" />
|
||||
<img src="./components/img/xzh.png" alt="" class="imgselect" v-if="item.isChecked"
|
||||
@click.stop="girdClick(item, index)"/>
|
||||
<img src="./components/img/xz.png" alt="" class="imgselect" v-else @click.stop="girdClick(item, index)"/>
|
||||
<img src="./components/img/gird--select-icon.png" alt="" class="avatras"/>
|
||||
</div>
|
||||
<div class="rightes">
|
||||
<div class="applicationNames">{{ item.girdName }}</div>
|
||||
<img src="./components/img/right-icon.png" alt="" class="imgs" v-if="item.girdLevel != 2"/>
|
||||
<div class="rightes fill">
|
||||
<div class="applicationNames fill">{{ item.girdName }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<AiEmpty description="暂无数据" class="emptyWrap" v-else></AiEmpty>
|
||||
<AiEmpty :description="isGridMember?`暂无数据`:`当前人员不是网格员或网格管理员`" class="emptyWrap" v-else/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div style="padding-bottom: 70px;"></div> -->
|
||||
<div class="subBtn" @click="submit">
|
||||
<div>确定选择</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState} from "vuex";
|
||||
|
||||
export default {
|
||||
name: 'SelectGird',
|
||||
data() {
|
||||
@@ -41,90 +43,92 @@ export default {
|
||||
allData: null,
|
||||
treeList: [],
|
||||
slectList: [],
|
||||
userGird: {},
|
||||
userList: [],
|
||||
girdLevel: 0,
|
||||
parentGirdId: ''
|
||||
parentGirdId: '',
|
||||
isFormMap: 0, //1为网格地图 一级不允许选中
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.isGirdUser()
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
isMyGirds() {
|
||||
return !!this.$route.query.self
|
||||
},
|
||||
isGridMember() {
|
||||
return this.user.girdCheckType > 0
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
if (option.isFormMap) {
|
||||
this.isFormMap = option.isFormMap
|
||||
}
|
||||
this.isGridMember ? this.getAllGrids() : this.$u.toast('当前人员不是网格员或网格管理员')
|
||||
},
|
||||
methods: {
|
||||
isGirdUser() {
|
||||
this.$http.post('/app/appgirdmemberinfo/checkLogOnUser').then((res) => {
|
||||
if (res.code == 0) {
|
||||
if (res.data.checkType) {
|
||||
this.userGird = res.data
|
||||
this.getTree()
|
||||
} else {
|
||||
this.$u.toast('当前人员不是网格员或网格管理员')
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
getTree() {
|
||||
getAllGrids() {
|
||||
this.slectList = []
|
||||
this.$http.post(`/app/appgirdinfo/queryAppGirdInfoByGirdLevel?girdLevel=${this.girdLevel}&girdMemberId=${this.userGird.girdMemberId}&parentGirdId=${this.parentGirdId}`).then((res) => {
|
||||
let {girdMemberId} = this.user,
|
||||
url = `/app/appgirdinfo/queryAppGirdInfoByGirdLevel`,
|
||||
params = {girdMemberId}
|
||||
if (this.isMyGirds) {
|
||||
url = `/app/appgirdmemberinfo/queryMyGirdListByLevel2AndUser`
|
||||
params = {}
|
||||
}
|
||||
this.$http.post(url, null, {params}).then((res) => {
|
||||
if (res?.data) {
|
||||
this.allData = res.data
|
||||
let parents = res.data.map(e => e.parentGirdId)
|
||||
this.allData = res.data.map(e => ({...e, hasChildren: parents.includes(e.id)}))
|
||||
this.treeInit()
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
treeInit() {
|
||||
this.treeList = this.allData
|
||||
this.treeList.map((item) => {
|
||||
item.isChecked = false
|
||||
})
|
||||
var obj = {
|
||||
girdName: '可选范围',
|
||||
id: '',
|
||||
girdLevel: ''
|
||||
let last = uni.getStorageSync("lastSelectedGrid")
|
||||
if (last) {
|
||||
this.$http.post("/app/appgirdinfo/listFatherGirdInfo", null, {
|
||||
params: {girdId: last}
|
||||
}).then(res => {
|
||||
if (res?.data) {
|
||||
this.slectList = [{girdName: '可选范围', id: ''}, res.data].flat()
|
||||
this.getGridsByGridMemberAndParent({id: last})
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.treeList = this.allData.filter(e => !e.parentGirdId || this.isMyGirds)
|
||||
this.treeList.map((item) => item.isChecked = false)
|
||||
let obj = {girdName: '可选范围', id: ''}
|
||||
this.slectList.push(obj)
|
||||
}
|
||||
this.slectList.push(obj)
|
||||
},
|
||||
|
||||
itemClick(row) {
|
||||
if(row.girdLevel == 2) return
|
||||
var obj = {
|
||||
girdName: row.girdName,
|
||||
id: row.id,
|
||||
girdLevel: row.girdLevel
|
||||
}
|
||||
this.slectList.push(obj)
|
||||
this.searckGird(row)
|
||||
},
|
||||
|
||||
searckGird(row) {
|
||||
if(row.girdLevel == 2) return
|
||||
var girdLevel = Number(row.girdLevel)+1
|
||||
this.$http.post(`/app/appgirdinfo/queryAppGirdInfoByGirdLevel?girdLevel=${girdLevel}&girdMemberId=${this.userGird.girdMemberId}&parentGirdId=${row.id}`).then((res) => {
|
||||
if (res?.data) {
|
||||
this.treeList = res.data
|
||||
if (row.hasChildren) {
|
||||
let obj = {
|
||||
girdName: row.girdName,
|
||||
id: row.id,
|
||||
}
|
||||
})
|
||||
this.slectList.push(obj)
|
||||
this.getGridsByGridMemberAndParent(row)
|
||||
}
|
||||
},
|
||||
getGridsByGridMemberAndParent(row) {
|
||||
let {id: parentGirdId} = row
|
||||
this.treeList = this.allData.filter(e => e.parentGirdId == parentGirdId)
|
||||
},
|
||||
|
||||
girdNameClick(row, index) {
|
||||
this.userList = []
|
||||
if(!index) { //第一级别
|
||||
if (!index) { //第一级别
|
||||
this.slectList = []
|
||||
this.treeInit()
|
||||
}else {
|
||||
} else {
|
||||
var list = []
|
||||
this.slectList.map((item, i) => {
|
||||
if(i <= index) {
|
||||
if (i <= index) {
|
||||
list.push(item)
|
||||
}
|
||||
})
|
||||
this.slectList = list
|
||||
this.searckGird(row)
|
||||
this.getGridsByGridMemberAndParent(row)
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
girdClick(row, index) {
|
||||
if (this.treeList[index].isChecked) {//取消
|
||||
this.treeList[index].isChecked = false
|
||||
@@ -138,29 +142,28 @@ export default {
|
||||
}
|
||||
this.$forceUpdate()
|
||||
},
|
||||
|
||||
|
||||
submit() {
|
||||
if (this.SelectGird.id != null) {
|
||||
uni.$emit('goback', this.SelectGird)
|
||||
uni.navigateBack()
|
||||
uni.setStorageSync("lastSelectedGrid", this.SelectGird.parentGirdId)
|
||||
uni.navigateBack({
|
||||
success: () => {
|
||||
uni.$emit("pagePicker:custom", this.SelectGird)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
return this.$u.toast('请选择网格')
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.SelectGird {
|
||||
height: 100%;
|
||||
min-height: 100vh;
|
||||
background: #fff;
|
||||
padding-bottom: 140px;
|
||||
.header-top {
|
||||
background: #fff;
|
||||
padding: 20px 32px;
|
||||
}
|
||||
box-sizing: border-box;
|
||||
|
||||
.header-middle {
|
||||
.hint {
|
||||
@@ -173,11 +176,6 @@ export default {
|
||||
}
|
||||
|
||||
.showTypes {
|
||||
.empty-div {
|
||||
height: 16px;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -203,82 +201,32 @@ export default {
|
||||
margin-left: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
width: 74px;
|
||||
height: 74px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.rightes {
|
||||
width: calc(100% - 188px);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-left: 32px;
|
||||
border-bottom: 1px solid #e4e5e6;
|
||||
padding: 0 16px;
|
||||
|
||||
.applicationNames {
|
||||
width: calc(100% - 100px);
|
||||
display: inline-block;
|
||||
font-size: 36px;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
white-space:nowrap;
|
||||
}
|
||||
.imgs {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
vertical-align: middle;
|
||||
margin-right: 32px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.showUsers {
|
||||
.cards {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 120px;
|
||||
line-height: 120px;
|
||||
// background: pink;
|
||||
padding: 0 0 0 32px;
|
||||
|
||||
.imges {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 200px;
|
||||
.imgselect {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.avatras {
|
||||
width: 74px;
|
||||
height: 74px;
|
||||
border-radius: 8px;
|
||||
margin-left: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
.rights {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-left: 32px;
|
||||
border-bottom: 1px solid #e4e5e6;
|
||||
padding-right: 40px;
|
||||
.applicationNames {
|
||||
font-size: 36px;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
.idNumbers {
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.subBtn {
|
||||
@@ -288,6 +236,7 @@ export default {
|
||||
width: 100%;
|
||||
height: 118px;
|
||||
background: #f4f8fb;
|
||||
|
||||
div {
|
||||
width: 192px;
|
||||
height: 80px;
|
||||
|
||||
@@ -1,369 +1,149 @@
|
||||
<template>
|
||||
<div class="setGird">
|
||||
<div class="header-middle">
|
||||
<div class="hint">
|
||||
<span v-for="(item, index) in slectList" :key="index"><span v-if="index" style="margin:0 4px;">/</span><span style="color:#3F8DF5" @click="girdNameClick(item, index)">{{item.girdName}}</span></span>
|
||||
</div>
|
||||
|
||||
<div class="showTypes" v-if="!userList.length">
|
||||
<AiGroup>
|
||||
<AiItem :label="detail.girdName" :border="false" labelBold>
|
||||
<u-icon name="arrow-right" label="查看网格成员" label-pos="left" label-color="#3F8DF5" @click="showGirdInfo()"/>
|
||||
</AiItem>
|
||||
</AiGroup>
|
||||
<AiGroup>
|
||||
<AiItem label="下级网格" top-label :border="false" labelBold>
|
||||
<div v-if="treeList.length > 0">
|
||||
<div class="cards" v-for="(item, index) in treeList" :key="index">
|
||||
<div class="imges">
|
||||
<!-- <span v-if="item.girdRight == 1 && item.girdLevel != 2">
|
||||
<img src="./components/img/xzh.png" alt="" class="imgselect" v-if="item.isChecked" @click.stop="girdClick(item, index)" />
|
||||
<img src="./components/img/xz.png" alt="" class="imgselect" v-else @click.stop="girdClick(item, index)" />
|
||||
</span>
|
||||
<span v-else style="width:24px;"></span> -->
|
||||
<img src="./components/img/gird--select-icon.png" alt="" class="avatras" />
|
||||
</div>
|
||||
<div class="rightes">
|
||||
<div class="applicationNames" @click="showGirdInfo(item)">{{ item.girdName }}</div>
|
||||
<div class="right-icon" v-if="item.girdLevel != 2" @click="itemClick(item)" >
|
||||
<img src="./components/img/right-icon.png" alt="" class="imgs" />
|
||||
</div>
|
||||
<div class="rightes fill" flex>
|
||||
<img src="./components/img/gird--select-icon.png" alt="" class="avatras"/>
|
||||
<div class="applicationNames fill" @click="showGirdInfo(item)">{{ item.girdName }}</div>
|
||||
<u-icon v-if="item.hasChildren" @click="itemClick(item)" name="arrow-right" color="#ddd"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<AiEmpty description="暂无数据" class="emptyWrap" v-else></AiEmpty>
|
||||
</div>
|
||||
<AiEmpty description="暂无数据" class="emptyWrap" v-else/>
|
||||
</AiItem>
|
||||
</AiGroup>
|
||||
<div class="subBtn" v-if="detail.girdRight==1">
|
||||
<div @click="toAddGird">添加下级网格</div>
|
||||
<div @click="handleDelete">编辑网格</div>
|
||||
<div class="delete" @click="toAddGird">删除网格</div>
|
||||
</div>
|
||||
<!-- <div style="padding-bottom: 70px;"></div> -->
|
||||
<!-- <div class="subBtn" @click="toAddGird" v-if="slectList.length && slectList[slectList.length-1].girdLevel != 1">
|
||||
<div>添加网格</div>
|
||||
</div> -->
|
||||
|
||||
<u-popup v-model="show" mode="bottom" border-radius="14" height="1000">
|
||||
<div class="popup">
|
||||
<div class="bg"></div>
|
||||
<div class="title">{{ form.girdName }}</div>
|
||||
<div class="info-flex">
|
||||
<span class="label">网格类型</span>
|
||||
<span class="value">{{ $dict.getLabel('girdType', form.girdType) }}</span>
|
||||
</div>
|
||||
<div class="info-flex">
|
||||
<span class="label">网格层级</span>
|
||||
<span class="value">{{ $dict.getLabel('girdLevel', form.girdLevel) }}</span>
|
||||
</div>
|
||||
<div v-if="form.girdMemberManageList && form.girdMemberManageList.length">
|
||||
<div class="info-flex" v-for="(item, index) in form.girdMemberManageList" :key="index">
|
||||
<span class="label">网格长</span>
|
||||
<span class="value">{{ item.name }} {{ item.phone }}
|
||||
<img :src="$cdn + 'common/phone.png'" alt="" @click="callPhone(item.phone)" class="phone-icon"
|
||||
v-if="item.phone">
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="form.girdMemberList && form.girdMemberList.length">
|
||||
<div class="info-flex" v-for="(item, index) in form.girdMemberList" :key="index">
|
||||
<span class="label">网格员</span>
|
||||
<span class="value">{{ item.name }} {{ item.phone }}
|
||||
<img :src="$cdn + 'common/phone.png'" alt="" @click="callPhone(item.phone)" class="phone-icon"
|
||||
v-if="item.phone">
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height:56px;"></div>
|
||||
<div class="btn">
|
||||
<span class="del mar-r32" @click="del" v-if="form.girdRight == 1">删除网格</span>
|
||||
<span class="edit mar-r32" @click="edit" v-if="form.girdRight == 1">编辑网格</span>
|
||||
<span class="edit" :class="form.girdRight == 1 ? '' : 'flex1'" v-if="form.girdLevel != 2" @click="toAddGird">添加下级网格</span>
|
||||
</div>
|
||||
</div>
|
||||
</u-popup>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState} from "vuex"
|
||||
|
||||
export default {
|
||||
name: 'setGird',
|
||||
data() {
|
||||
return {
|
||||
setGird: {},
|
||||
allData: null,
|
||||
detail: {},
|
||||
treeList: [],
|
||||
slectList: [],
|
||||
userList: [],
|
||||
|
||||
show: false,
|
||||
form: {},
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.$dict.load('girdType', 'girdLevel')
|
||||
this.isGirdUser()
|
||||
uni.$on('update', () => {
|
||||
this.show = false
|
||||
this.getTree()
|
||||
})
|
||||
computed: {
|
||||
...mapState(['user'])
|
||||
},
|
||||
onShow() {
|
||||
this.getAllGrids()
|
||||
document.title = '网格配置'
|
||||
},
|
||||
methods: {
|
||||
isGirdUser() {
|
||||
this.$http.post('/app/appgirdmemberinfo/checkLogOnUser').then((res) => {
|
||||
if (res.code == 0) {
|
||||
if (res.data.checkType) {
|
||||
this.userGird = res.data
|
||||
this.getTree()
|
||||
} else {
|
||||
this.$u.toast('当前人员不是网格员或网格管理员')
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
getTree() {
|
||||
this.slectList = []
|
||||
this.$http.post(`/app/appgirdinfo/queryAppGirdInfoByGirdLevel?girdLevel=0&girdMemberId=${this.userGird.girdMemberId}&parentGirdId=`).then((res) => {
|
||||
getAllGrids() {
|
||||
let {id: parentGirdId} = this.$route.query
|
||||
this.$http.post(`/app/appgirdinfo/listByInfo`, null, {
|
||||
params: {parentGirdId}
|
||||
}).then(res => {
|
||||
if (res?.data) {
|
||||
this.allData = res.data
|
||||
this.treeInit()
|
||||
let parents = [...new Set(res.data.map(e => e.parentGirdId))]
|
||||
this.detail = res.data.find(e => e.id == parentGirdId) || {}
|
||||
this.treeList = res.data.filter(e => e.parentGirdId == parentGirdId).map(e => ({...e, hasChildren: parents.includes(e.id)}))
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
treeInit() {
|
||||
this.treeList = this.allData
|
||||
this.treeList.map((item) => {
|
||||
item.isChecked = false
|
||||
})
|
||||
var obj = {
|
||||
girdName: '可选范围',
|
||||
id: '',
|
||||
girdLevel: '0'
|
||||
}
|
||||
this.slectList.push(obj)
|
||||
},
|
||||
|
||||
itemClick(row) {
|
||||
if(row.girdLevel == 2) return
|
||||
var obj = {
|
||||
girdName: row.girdName,
|
||||
id: row.id,
|
||||
girdLevel: row.girdLevel
|
||||
}
|
||||
this.slectList.push(obj)
|
||||
this.searckGird(row)
|
||||
uni.navigateTo({url: `./SetGird?id=${row.id}`})
|
||||
},
|
||||
|
||||
searckGird(row) {
|
||||
if(row.girdLevel == 2) return
|
||||
var girdLevel = Number(row.girdLevel)+1
|
||||
this.$http.post(`/app/appgirdinfo/queryAppGirdInfoByGirdLevel?girdLevel=${girdLevel}&girdMemberId=${this.userGird.girdMemberId}&parentGirdId=${row.id}`).then((res) => {
|
||||
if (res?.data) {
|
||||
this.treeList = res.data
|
||||
this.setGird = {}
|
||||
}
|
||||
})
|
||||
showGirdInfo(row = {id: this.$route.query.id}) {
|
||||
uni.navigateTo({url: `./gridMembers?id=${row.id}`})
|
||||
},
|
||||
|
||||
girdNameClick(row, index) {
|
||||
this.userList = []
|
||||
if(!index) { //第一级别
|
||||
this.slectList = []
|
||||
this.treeInit()
|
||||
}else {
|
||||
var list = []
|
||||
this.slectList.map((item, i) => {
|
||||
if(i <= index) {
|
||||
list.push(item)
|
||||
}
|
||||
})
|
||||
this.slectList = list
|
||||
this.searckGird(row)
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
girdClick(row, index) {
|
||||
if (this.treeList[index].isChecked) {//取消
|
||||
this.treeList[index].isChecked = false
|
||||
this.setGird = {}
|
||||
} else {
|
||||
this.treeList.map((item) => {
|
||||
item.isChecked = false
|
||||
})
|
||||
this.treeList[index].isChecked = true
|
||||
this.setGird = row
|
||||
}
|
||||
this.$forceUpdate()
|
||||
},
|
||||
|
||||
showGirdInfo(row) {
|
||||
this.show = true
|
||||
this.form = row
|
||||
},
|
||||
|
||||
del() {
|
||||
this.$confirm(`是否删除该网格？`).then(() => {
|
||||
this.$http.post(`/app/appgirdinfo/delete?ids=${this.form.id}`).then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.$u.toast('删除成功!')
|
||||
this.show = false
|
||||
this.form = {}
|
||||
this.treeList = []
|
||||
this.isGirdUser()
|
||||
}
|
||||
}).catch((err) => {
|
||||
this.$u.toast(err)
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
edit() {
|
||||
uni.navigateTo({url: `./AddGird?id=${this.form.id}&fromType=edit`})
|
||||
},
|
||||
|
||||
callPhone(phone) {
|
||||
uni.makePhoneCall({phoneNumber: phone})
|
||||
},
|
||||
|
||||
toAddGird() {
|
||||
console.log(this.setGird)
|
||||
// if (this.setGird.id != null) {
|
||||
// uni.navigateTo({url: `./AddGird?id=${this.setGird.id}&fromType=add`})
|
||||
// } else {
|
||||
// return this.$u.toast('请选择网格')
|
||||
// }
|
||||
uni.navigateTo({url: `./AddGird?id=${this.form.id}&fromType=add`})
|
||||
}
|
||||
uni.navigateTo({url: `./AddGird?id=${this.detail.id}&fromType=add`})
|
||||
},
|
||||
edit() {
|
||||
uni.navigateTo({url: `./AddGird?id=${this.detail.id}&fromType=edit`})
|
||||
},
|
||||
handleDelete() {
|
||||
this.$confirm('删除网格后，会清除网格内网格员和责任家庭信息，如有下级网格，会同步删除下级网格所有数据', `您确认要删除该网格？`).then(() => {
|
||||
this.$http.post(`/app/appgirdinfo/delete?ids=${this.detail.id}`).then((res) => {
|
||||
if (res?.code == 0) {
|
||||
this.$u.toast('删除成功!')
|
||||
this.getDetail()
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.setGird {
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
min-height: 100vh;
|
||||
background: #F5F6F7;
|
||||
padding-bottom: 140px;
|
||||
.header-top {
|
||||
background: #fff;
|
||||
padding: 20px 32px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.empty-div {
|
||||
height: 16px;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.header-middle {
|
||||
.hint {
|
||||
padding: 28px 20px 28px 32px;
|
||||
line-height: 56px;
|
||||
box-shadow: 0px 1px 0px 0px #e4e5e6;
|
||||
font-size: 30px;
|
||||
font-weight: 500;
|
||||
word-break: break-all;
|
||||
.cards {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 120px;
|
||||
line-height: 120px;
|
||||
// background: pink;
|
||||
|
||||
.avatras {
|
||||
width: 74px;
|
||||
height: 74px;
|
||||
border-radius: 8px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.showTypes {
|
||||
.empty-div {
|
||||
height: 16px;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 120px;
|
||||
line-height: 120px;
|
||||
// background: pink;
|
||||
padding: 0 0 0 32px;
|
||||
|
||||
.imges {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// width: 200px;
|
||||
.imgselect {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.avatras {
|
||||
width: 74px;
|
||||
height: 74px;
|
||||
border-radius: 8px;
|
||||
margin-left: 36px;
|
||||
}
|
||||
}
|
||||
img {
|
||||
width: 74px;
|
||||
height: 74px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.rightes {
|
||||
width: calc(100% - 140px);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-left: 32px;
|
||||
border-bottom: 1px solid #e4e5e6;
|
||||
.applicationNames {
|
||||
width: calc(100% - 100px);
|
||||
font-size: 36px;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
white-space:nowrap;
|
||||
}
|
||||
.right-icon{
|
||||
width: 100px;
|
||||
padding-right: 32px;
|
||||
box-sizing: border-box;
|
||||
text-align: right;
|
||||
.imgs {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
img {
|
||||
width: 74px;
|
||||
height: 74px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.showUsers {
|
||||
.cards {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 120px;
|
||||
line-height: 120px;
|
||||
// background: pink;
|
||||
padding: 0 0 0 32px;
|
||||
.rightes {
|
||||
display: flex;
|
||||
border-bottom: 1px solid #e4e5e6;
|
||||
padding-right: 16px;
|
||||
|
||||
.imges {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 200px;
|
||||
.imgselect {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
.applicationNames {
|
||||
display: inline-block;
|
||||
font-size: 36px;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.avatras {
|
||||
width: 74px;
|
||||
height: 74px;
|
||||
border-radius: 8px;
|
||||
margin-left: 36px;
|
||||
}
|
||||
}
|
||||
.imgs {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-right: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.rights {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-left: 32px;
|
||||
border-bottom: 1px solid #e4e5e6;
|
||||
padding-right: 40px;
|
||||
.applicationNames {
|
||||
font-size: 36px;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
.idNumbers {
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
.u-icon {
|
||||
padding: 0 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -375,104 +155,30 @@ export default {
|
||||
width: 100%;
|
||||
height: 118px;
|
||||
background: #f4f8fb;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
|
||||
div {
|
||||
width: 192px;
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
padding: 0 32px;
|
||||
height: 88px;
|
||||
line-height: 88px;
|
||||
text-align: center;
|
||||
background: #1365dd;
|
||||
border-radius: 4px;
|
||||
border-radius: 8px;
|
||||
font-size: 32px;
|
||||
color: #fff;
|
||||
margin: 20px 34px 0 0;
|
||||
margin-left: 22px;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
border: 2px #1365dd solid;
|
||||
|
||||
.popup {
|
||||
padding: 0 32px 16px;
|
||||
|
||||
.bg {
|
||||
width: 64px;
|
||||
height: 10px;
|
||||
background: #CCC;
|
||||
border-radius: 6px;
|
||||
margin: 32px 0 32px 344px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 36px;
|
||||
font-family: PingFang-SC-Heavy, PingFang-SC;
|
||||
font-weight: 800;
|
||||
color: #333;
|
||||
line-height: 50px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.info-flex {
|
||||
padding: 26px 0 30px 0;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #D8DDE6;
|
||||
line-height: 40px;
|
||||
font-size: 28px;
|
||||
|
||||
.label {
|
||||
display: inline-block;
|
||||
width: 160px;
|
||||
font-weight: 800;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: #666;
|
||||
font-size: 26px;
|
||||
|
||||
.phone-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
vertical-align: sub;
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.border-b0{
|
||||
border-bottom: 0;
|
||||
}
|
||||
.btn{
|
||||
width: 100%;
|
||||
padding: 32px;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
span{
|
||||
display: inline-block;
|
||||
height: 92px;
|
||||
line-height: 90px;
|
||||
border-radius: 8px;
|
||||
font-size: 32px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
box-sizing: border-box;
|
||||
padding: 0 28px;
|
||||
}
|
||||
.del{
|
||||
&.delete {
|
||||
background: #fff;
|
||||
color: #f46;
|
||||
border: 1px solid #f46;
|
||||
border-color: #f46;
|
||||
}
|
||||
.edit{
|
||||
background-color: #3671EE;
|
||||
color: #fff;
|
||||
}
|
||||
.mar-r32{
|
||||
|
||||
&:first-of-type {
|
||||
margin-right: 32px;
|
||||
}
|
||||
.flex1{
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -26,27 +26,14 @@
|
||||
|
||||
<div class="bottom">
|
||||
<div class="girdMsg">网格信息</div>
|
||||
|
||||
<div class="girdCont">
|
||||
<div class="boxes">
|
||||
<span class="boxesLeft">网格名称</span>
|
||||
|
||||
<span class="boxesRight">{{ girdMsgList.girdName || '' }}</span>
|
||||
<!-- <span class="boxesRight">{{ girdUser.appGirdInfo.girdName }}</span> -->
|
||||
<span class="boxesRight">{{ gridInfo.girdName || '' }}</span>
|
||||
</div>
|
||||
|
||||
<div class="boxes">
|
||||
<span class="boxesLeft">网格类型</span>
|
||||
|
||||
<span class="boxesRight">
|
||||
{{ $dict.getLabel('girdType', girdMsgList.girdType) || '' }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="boxes">
|
||||
<span class="boxesLeft">网格层级</span>
|
||||
|
||||
<span class="boxesRight">{{ $dict.getLabel('girdLevel', girdMsgList.girdLevel) || '' }}</span>
|
||||
<span class="boxesLeft">标绘状态</span>
|
||||
<span class="boxesRight">{{ gridInfo.plottingStatus == 1 ? '已标绘' : '未标绘' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -64,56 +51,37 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
girdUser: [],
|
||||
peopleList: {},
|
||||
girdMsgList: {},
|
||||
gridInfo: {},
|
||||
checkType: '',
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
watch: {},
|
||||
onLoad() {},
|
||||
created() {
|
||||
this.$dict.load('girdType', 'girdLevel').then(() => {
|
||||
this.isGirdUser()
|
||||
this.girdMsgList = this.params
|
||||
this.getList()
|
||||
})
|
||||
|
||||
this.gridInfo = this.params
|
||||
this.getList()
|
||||
uni.$on('goback', (res) => {
|
||||
this.girdMsgList = res
|
||||
this.gridInfo = res
|
||||
this.getList()
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
isGirdUser() {
|
||||
this.$http.post('/app/appgirdmemberinfo/checkLogOnUser').then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.girdUser = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
getList() {
|
||||
this.$http.post(`/app/appgirdmemberinfo/girdMemberAndResidentStatistic?girdId=${this.girdMsgList.id}`).then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.$http.post(`/app/appgirdmemberinfo/girdMemberAndResidentStatistic?girdId=${this.gridInfo.id}`).then((res) => {
|
||||
if (res?.data) {
|
||||
this.peopleList = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
linkTo(url) {
|
||||
uni.navigateTo({ url })
|
||||
uni.navigateTo({url})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
uni-page-body {
|
||||
height: 100%;
|
||||
}
|
||||
.Statistics {
|
||||
padding: 0 30px 0;
|
||||
padding: 0 30px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.middle {
|
||||
@@ -121,25 +89,30 @@ uni-page-body {
|
||||
border-radius: 16px;
|
||||
margin-top: 32px;
|
||||
padding: 32px 0 60px 0;
|
||||
|
||||
.girdPeople {
|
||||
padding: 0 0 56px 24px;
|
||||
font-size: 32px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.card {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
|
||||
.box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.count {
|
||||
font-size: 64px;
|
||||
font-family: DINAlternate-Bold, DINAlternate;
|
||||
font-weight: bold;
|
||||
color: #3b424a;
|
||||
}
|
||||
|
||||
.girdCount {
|
||||
margin-top: 8px;
|
||||
font-size: 28px;
|
||||
@@ -156,16 +129,19 @@ uni-page-body {
|
||||
border-radius: 16px;
|
||||
margin-top: 32px;
|
||||
padding: 0 24px 64px 24px;
|
||||
|
||||
.girdMsg {
|
||||
padding: 32px 0;
|
||||
font-size: 32px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.girdCont {
|
||||
.boxes {
|
||||
padding: 24px 0 30px 0;
|
||||
box-shadow: inset 0px -1px 0px 0px #d8dde6;
|
||||
|
||||
.boxesLeft {
|
||||
font-size: 30px;
|
||||
font-family: PingFang-SC-Heavy, PingFang-SC;
|
||||
@@ -175,6 +151,7 @@ uni-page-body {
|
||||
width: 140px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.boxesRight {
|
||||
margin-left: 40px;
|
||||
font-size: 28px;
|
||||
|
||||
187
src/project/grid/AppGridManagement/gridMembers.vue
Normal file
187
src/project/grid/AppGridManagement/gridMembers.vue
Normal file
@@ -0,0 +1,187 @@
|
||||
<template>
|
||||
<section class="gridMembers">
|
||||
<div class="title">{{ detail.girdName }}</div>
|
||||
<div flex v-for="(item, index) in list" :key="index" class="listItem">
|
||||
<!-- <img class="avatar" :src="item.photo"/>-->
|
||||
<div class="fill">
|
||||
<div class="memberName" v-text="item.name"/>
|
||||
<div flex>
|
||||
<div class="color-999" v-text="item.userRole"/>
|
||||
<div v-if="item.label" class="tag" v-text="item.label"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btns">
|
||||
<div @click="gotoFamilyList(item)">责任家庭</div>
|
||||
<!-- <div @click="handleTag(item)">标签设置</div>-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn" v-if="detail.girdRight == 1">
|
||||
<span class="del" @click="del" v-if="!!detail.parentGirdId">删除网格</span>
|
||||
<span class="edit" @click="edit">编辑网格</span>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "gridMembers",
|
||||
appName: "网格成员",
|
||||
computed: {
|
||||
list() {
|
||||
let {girdMemberManageList, girdMemberList} = this.detail
|
||||
return [girdMemberManageList?.map(e => ({...e, userRole: "网格长"})) || [],
|
||||
girdMemberList?.map(e => ({
|
||||
...e,
|
||||
userRole: "网格员"
|
||||
})) || []].flat()
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
detail: {}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getDetail() {
|
||||
let {id} = this.$route.query
|
||||
this.$http.post("/app/appgirdinfo/queryDetailById", null, {
|
||||
params: {id}
|
||||
}).then(res => {
|
||||
if (res?.data) {
|
||||
this.detail = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
del() {
|
||||
this.$confirm('删除网格后，会清除网格内网格员和责任家庭信息，如有下级网格，会同步删除下级网格所有数据', `您确认要删除该网格？`).then(() => {
|
||||
this.$http.post(`/app/appgirdinfo/delete?ids=${this.detail.id}`).then((res) => {
|
||||
if (res?.code == 0) {
|
||||
this.$u.toast('删除成功!')
|
||||
this.getDetail()
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
edit() {
|
||||
uni.navigateTo({url: `./AddGird?id=${this.detail.id}&fromType=edit`})
|
||||
},
|
||||
handleTag({id, label}) {
|
||||
uni.showModal({
|
||||
title: "设置标签",
|
||||
content: label,
|
||||
editable: true,
|
||||
placeholderText: "请输入标签,最多10字",
|
||||
success: res => {
|
||||
if (res.confirm) {
|
||||
if (res.content && res.content.length <= 10) {
|
||||
this.$http.post("/app/appgirdmemberinfo/updateGirdMemberLabelById", null, {
|
||||
params: {id, label: res.content}
|
||||
}).then(res => {
|
||||
if (res?.code == 0) {
|
||||
this.$u.toast("设置成功")
|
||||
this.getDetail()
|
||||
} else this.handleTag({id, label})
|
||||
}).catch(() => this.handleTag({id, label}))
|
||||
} else {
|
||||
this.$u.toast("请输入标签,最多10字")
|
||||
this.handleTag({id, label})
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
gotoFamilyList(item) {
|
||||
uni.navigateTo({url: `./FamilyList?id=${item.id}&girdId=${item.girdId}`})
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
this.getDetail()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.gridMembers {
|
||||
padding: 16px 32px 170px;
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
|
||||
.color-999 {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
margin-right: 32px;
|
||||
}
|
||||
|
||||
.btns {
|
||||
margin-left: 32px;
|
||||
line-height: 48px;
|
||||
color: #26f;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 36px;
|
||||
font-family: PingFang-SC-Heavy, PingFang-SC;
|
||||
font-weight: 800;
|
||||
color: #333;
|
||||
line-height: 50px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.listItem {
|
||||
padding: 20px 0;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
padding: 32px;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
height: 92px;
|
||||
line-height: 90px;
|
||||
border-radius: 8px;
|
||||
font-size: 34px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.del {
|
||||
color: #f46;
|
||||
border: 1px solid #f46;
|
||||
flex: 1;
|
||||
margin-right: 32px;
|
||||
}
|
||||
|
||||
.edit {
|
||||
background-color: #3671EE;
|
||||
color: #fff;
|
||||
flex: 2;
|
||||
}
|
||||
}
|
||||
|
||||
.memberName {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.tag {
|
||||
margin-left: 32px;
|
||||
padding: 4px 8px;
|
||||
border-radius: 8px;
|
||||
background: #26f;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
305
src/project/grid/AppGridManagement/selectGridMember.vue
Normal file
305
src/project/grid/AppGridManagement/selectGridMember.vue
Normal file
@@ -0,0 +1,305 @@
|
||||
<template>
|
||||
<section class="selectGridMember">
|
||||
<div class="header-middle">
|
||||
<div class="hint">
|
||||
<span v-for="(item, index) in selectGridPath" :key="index"><span v-if="index" style="margin:0 4px;">/</span><span
|
||||
style="color:#3F8DF5" @click="girdNameClick(item, index)">{{ item.girdName }}</span></span>
|
||||
</div>
|
||||
<div class="cards" v-for="(item, index) in treeList" :key="item.id" @click="itemClick(item)">
|
||||
<div class="imges">
|
||||
<img src="./components/img/xzh.png" alt="" class="imgselect" v-if="item.isChecked"
|
||||
@click.stop="girdClick(item, index)"/>
|
||||
<img src="./components/img/xz.png" alt="" class="imgselect" v-else
|
||||
@click.stop="girdClick(item, index)"/>
|
||||
<img src="./components/img/gird--select-icon.png" alt="" class="avatras"/>
|
||||
</div>
|
||||
<div class="rightes">
|
||||
<div class="applicationNames">{{ item.girdName }}</div>
|
||||
<img src="./components/img/right-icon.png" alt="" class="imgs"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="userCards" v-for="(e, index) in userList" :key="e.id">
|
||||
<div class="imges">
|
||||
<img src="./components/img/xzh.png" alt="" class="imgselect" v-if="e.isChecked" @click="userClick(e, index)"/>
|
||||
<img src="./components/img/xz.png" alt="" class="imgselect" v-else @click="userClick(e, index)"/>
|
||||
<img src="./components/img/tx@2x.png" alt="" class="avatras"/>
|
||||
</div>
|
||||
<div class="rights fill">
|
||||
<div class="applicationNames">
|
||||
<AiOpenData v-if="e.name" type="userName" :openid="e.name" style="display: block;"/>
|
||||
</div>
|
||||
<div class="idNumbers">{{ e.phone }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<AiEmpty description="暂无数据" v-if="!hasData"/>
|
||||
</div>
|
||||
<div class="subBtn" @click="submit">
|
||||
<div>确定选择</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "selectGridMember",
|
||||
appName: "选择人员(网格成员)",
|
||||
data() {
|
||||
return {
|
||||
selected: {},
|
||||
allData: null,
|
||||
treeList: [],
|
||||
selectGridPath: [],
|
||||
userList: [],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
hasData() {
|
||||
return this.treeList?.length > 0 || this.userList?.length > 0
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.selected.id = this.$route.query.id
|
||||
this.getAllGrids()
|
||||
},
|
||||
onShow() {
|
||||
document.title = '选择人员'
|
||||
},
|
||||
methods: {
|
||||
getAllGrids() {
|
||||
this.$http.post('/app/appgirdinfo/listByInfo').then((res) => {
|
||||
if (res?.data) {
|
||||
let parents = res.data.map(e => e.parentGirdId)
|
||||
this.allData = res.data.map(e => ({...e, hasChildren: parents.includes(e.id)}))
|
||||
this.gridInit()
|
||||
}
|
||||
})
|
||||
},
|
||||
gridInit() {
|
||||
this.treeList = this.allData.filter(e => !e.parentGirdId)
|
||||
this.selectGridPath = [{girdName: "可选范围", id: ''}]
|
||||
},
|
||||
itemClick({id, girdName}) {
|
||||
this.selectGridPath.push({girdName, id})
|
||||
this.getGridsAndUsersByParent(id)
|
||||
},
|
||||
|
||||
getGridsAndUsersByParent(id) {
|
||||
this.treeList = this.allData.filter(e => e.parentGirdId == id)
|
||||
this.userList = []
|
||||
this.$http.post(`/app/appgirdmemberinfo/listByGirdIdByThree?girdId=${id}`).then((res) => {
|
||||
if (res?.data) {
|
||||
this.userList = res.data.map(e => ({...e, isChecked: e.id == this.selected.id}))
|
||||
}
|
||||
})
|
||||
},
|
||||
girdNameClick(row, index) {
|
||||
this.userList = []
|
||||
if (!index) { //第一级别
|
||||
this.gridInit()
|
||||
} else {
|
||||
let length = this.selectGridPath.length - index
|
||||
this.selectGridPath.splice(index, length)
|
||||
this.getGridsAndUsersByParent(row.id)
|
||||
}
|
||||
},
|
||||
girdClick(row, index) {
|
||||
if (this.treeList[index].isChecked) {//取消
|
||||
this.treeList[index].isChecked = false
|
||||
this.selected = {}
|
||||
} else {
|
||||
this.treeList.map((item, i) => {
|
||||
item.isChecked = index == i
|
||||
})
|
||||
this.selected = {...row, kind: "grid"}
|
||||
}
|
||||
this.$forceUpdate()
|
||||
},
|
||||
|
||||
userClick(row, index) {
|
||||
if (this.userList[index].isChecked) {//取消
|
||||
this.userList[index].isChecked = false
|
||||
this.selected = {}
|
||||
} else {
|
||||
this.userList.map((item, i) => {
|
||||
item.isChecked = index == i
|
||||
})
|
||||
this.selected = {...row, kind: "user"}
|
||||
}
|
||||
this.$forceUpdate()
|
||||
},
|
||||
|
||||
submit() {
|
||||
if (this.selected.id != null) {
|
||||
uni.navigateBack({
|
||||
success: () => {
|
||||
uni.$emit("pagePicker:custom", this.selected)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
return this.$u.toast('请选择网格或网格员')
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.selectGridMember {
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
|
||||
.header-top {
|
||||
background: #fff;
|
||||
padding: 20px 32px;
|
||||
}
|
||||
|
||||
.header-middle {
|
||||
padding-bottom: 140px;
|
||||
|
||||
.hint {
|
||||
padding: 28px 20px 28px 32px;
|
||||
line-height: 56px;
|
||||
box-shadow: 0 1px 0 0 #e4e5e6;
|
||||
font-size: 30px;
|
||||
font-weight: 500;
|
||||
// word-break: break-all;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.empty-div {
|
||||
height: 16px;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 120px;
|
||||
line-height: 120px;
|
||||
padding: 0 0 0 32px;
|
||||
|
||||
.imges {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.imgselect {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.avatras {
|
||||
width: 74px;
|
||||
height: 74px;
|
||||
border-radius: 8px;
|
||||
margin-left: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
width: 74px;
|
||||
height: 74px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.rightes {
|
||||
width: calc(100% - 160px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 32px;
|
||||
border-bottom: 1px solid #e4e5e6;
|
||||
|
||||
.applicationNames {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
font-size: 36px;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.imgs {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.userCards {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 120px;
|
||||
line-height: 120px;
|
||||
padding: 0 0 0 32px;
|
||||
|
||||
.imges {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.imgselect {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.avatras {
|
||||
width: 74px;
|
||||
height: 74px;
|
||||
border-radius: 8px;
|
||||
margin-left: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
.rights {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-left: 32px;
|
||||
border-bottom: 1px solid #e4e5e6;
|
||||
padding-right: 40px;
|
||||
height: inherit;
|
||||
|
||||
.applicationNames {
|
||||
font-size: 36px;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.idNumbers {
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.subBtn {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 118px;
|
||||
background: #f4f8fb;
|
||||
|
||||
div {
|
||||
width: 192px;
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
text-align: center;
|
||||
background: #1365dd;
|
||||
border-radius: 4px;
|
||||
font-size: 32px;
|
||||
color: #fff;
|
||||
margin: 20px 34px 0 0;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
215
src/project/grid/AppHandSnapshot/AddSet.vue
Normal file
215
src/project/grid/AppHandSnapshot/AddSet.vue
Normal file
@@ -0,0 +1,215 @@
|
||||
<template>
|
||||
<div class="AddSet">
|
||||
<div class="contents">
|
||||
<u-form :model="forms" ref="uForm" label-width="auto" :border-bottom="false">
|
||||
<u-form-item label="事项分组" prop="title" required :border-bottom="false" right-icon="arrow-right">
|
||||
<u-input v-model="forms.title" placeholder="请输入事项分组" />
|
||||
</u-form-item>
|
||||
<u-form-item label="类别" prop="status" required :border-bottom="false"> </u-form-item>
|
||||
<div class="remove-item">
|
||||
<img src="./components/img/remove-icon.png" alt="" />
|
||||
<div class="input">
|
||||
<u-input v-model="forms.status" placeholder="请输入" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="remove-item">
|
||||
<img src="./components/img/add-icon.png" alt="" />
|
||||
<div class="input color-2270F1">添加分类</div>
|
||||
</div>
|
||||
</u-form>
|
||||
</div>
|
||||
|
||||
<!-- <div class="btn" @click="submit">保存</div> -->
|
||||
<div class="footer">
|
||||
<div class="remove">删除</div>
|
||||
<div class="confirm" @click="submit">保存</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'AddSet',
|
||||
components: {},
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
forms: {
|
||||
status: '',
|
||||
content: '',
|
||||
fileIds: [],
|
||||
},
|
||||
flag: false,
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
submit() {
|
||||
if (this.flag) return
|
||||
|
||||
this.$refs.uForm.validate((valid) => {
|
||||
if (valid) {
|
||||
if (!this.forms.title) {
|
||||
return this.$u.toast('请输入事项分组')
|
||||
}
|
||||
|
||||
const imgs = []
|
||||
if (this.forms.fileIds) {
|
||||
this.forms.fileIds.map((e) => {
|
||||
imgs.push({ url: e.url, id: e.id })
|
||||
})
|
||||
}
|
||||
|
||||
this.flag = true
|
||||
this.$http
|
||||
.post(`/app/appclapeventgroup/addOrUpdate`, {
|
||||
title: this.forms.title,
|
||||
content: this.forms.content,
|
||||
// images: JSON.stringify(imgs) || [],
|
||||
images: imgs || [],
|
||||
|
||||
people: this.forms.people,
|
||||
phone: this.forms.phone,
|
||||
id: this.id,
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.$u.toast('发布成功')
|
||||
this.flag = false
|
||||
uni.navigateTo({ url: `./AppHandSnapshot` })
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.$u.toast('失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
toSelectUser() {
|
||||
console.log(123)
|
||||
uni.navigateTo({ url: './SelectUser' })
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.AddSet {
|
||||
height: 100%;
|
||||
.contents {
|
||||
::v-deep .u-form {
|
||||
.u-form-item {
|
||||
padding: 0 45px !important;
|
||||
.u-form-item__body {
|
||||
.u-form-item--right__content__slot {
|
||||
padding-bottom: 0;
|
||||
.u-input {
|
||||
text-align: right !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.u-form-item:first-child {
|
||||
.u-form-item__body {
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
}
|
||||
|
||||
.line {
|
||||
height: 24px;
|
||||
background: #f3f6f9;
|
||||
}
|
||||
|
||||
.contents {
|
||||
padding-bottom: 20px !important;
|
||||
.u-form-item__body {
|
||||
.u-form-item--right__content__slot {
|
||||
.u-input {
|
||||
text-align: left !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.avatars {
|
||||
padding-bottom: 20px !important;
|
||||
.u-form-item__body {
|
||||
.default {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.remove-item {
|
||||
padding: 42px 0 42px 32px;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
img {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
margin-right: 12px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.input {
|
||||
display: inline-block;
|
||||
width: calc(100% - 48px);
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
}
|
||||
.color-2270F1 {
|
||||
color: #2270f1;
|
||||
font-size: 30px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
line-height: 42px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
background: #3975c6;
|
||||
padding: 34px 0;
|
||||
text-align: center;
|
||||
font-size: 32px;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
background: #fff;
|
||||
padding: 32px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
div {
|
||||
height: 92px;
|
||||
line-height: 92px;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
border-radius: 8px;
|
||||
font-size: 34px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
}
|
||||
.remove {
|
||||
flex: 1;
|
||||
border: 1px solid #f46;
|
||||
color: #f46;
|
||||
margin-right: 32px;
|
||||
}
|
||||
.confirm {
|
||||
flex: 2;
|
||||
background: #3975c6;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
155
src/project/grid/AppHandSnapshot/AppHandSnapshot.vue
Normal file
155
src/project/grid/AppHandSnapshot/AppHandSnapshot.vue
Normal file
@@ -0,0 +1,155 @@
|
||||
<template>
|
||||
<div class="AppHandSnapshot">
|
||||
<component v-if="refresh && isAdmin" :is="component" @change="onChange" :params="params"> </component>
|
||||
<div class="tabs" v-if="isTab && isAdmin">
|
||||
<div class="item" @click="tabClick(index, item.component)" v-for="(item, index) in tabs" :key="index">
|
||||
<img :src="tabIndex == index ? item.activeImg : item.img" alt="" />
|
||||
<p :class="tabIndex == index ? 'color-3267F0' : ''">{{ item.text }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!isAdmin" class="empty">
|
||||
<img src="./components/img/no-admin.png" alt="">
|
||||
<p>没有网格员权限<br />无法查看随手拍信息哦~</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import List from './List.vue'
|
||||
import Statistics from './Statistics.vue'
|
||||
import Set from './Set.vue'
|
||||
|
||||
export default {
|
||||
name: 'AppHandSnapshot',
|
||||
appName: '随手拍',
|
||||
|
||||
data() {
|
||||
return {
|
||||
component: 'List',
|
||||
params: {},
|
||||
refresh: true,
|
||||
tabIndex: 0,
|
||||
tabs: [
|
||||
{
|
||||
img: require('./components/img/handle-icon.png'),
|
||||
activeImg: require('./components/img/handle-icon-active.png'),
|
||||
text: '办理',
|
||||
component: 'List',
|
||||
},
|
||||
{
|
||||
img: require('./components/img/statistics-icon.png'),
|
||||
activeImg: require('./components/img/statistics-icon-active.png'),
|
||||
text: '统计',
|
||||
component: 'Statistics',
|
||||
},
|
||||
// {
|
||||
// img: require('./components/img/set-icon.png'),
|
||||
// activeImg: require('./components/img/set-icon-active.png'),
|
||||
// text: '配置',
|
||||
// component: 'Set'
|
||||
// }
|
||||
],
|
||||
isTab: true,
|
||||
isAdmin: false
|
||||
}
|
||||
},
|
||||
|
||||
components: {
|
||||
List,
|
||||
Statistics,
|
||||
Set,
|
||||
},
|
||||
|
||||
methods: {
|
||||
onChange(e) {
|
||||
this.params = e.params
|
||||
this.component = e.type
|
||||
},
|
||||
tabClick(index, component) {
|
||||
this.tabIndex = index
|
||||
this.component = component
|
||||
this.refresh = false
|
||||
this.$nextTick(() => {
|
||||
this.refresh = true
|
||||
})
|
||||
},
|
||||
isGirdUser() {
|
||||
this.isAdmin = false
|
||||
this.$http.post('/app/appgirdmemberinfo/checkLogOnUser').then((res) => {
|
||||
if (res.code == 0) {
|
||||
if (res.data.checkType != '0') {
|
||||
this.isAdmin = true
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
onLoad() {
|
||||
this.isGirdUser()
|
||||
},
|
||||
onShow() {
|
||||
document.title = '随手拍'
|
||||
uni.$on('hideTab', () => {
|
||||
this.isTab = false
|
||||
})
|
||||
uni.$on('showTab', () => {
|
||||
this.isTab = true
|
||||
})
|
||||
|
||||
},
|
||||
onReachBottom() {
|
||||
if(!this.tabIndex) {
|
||||
uni.$emit('nextList')
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.AppHandSnapshot {
|
||||
height: 100%;
|
||||
}
|
||||
.tabs {
|
||||
width: 100%;
|
||||
height: 98px;
|
||||
background: #fff;
|
||||
border-top: 1px solid #ddd;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
.item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
img {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
p {
|
||||
font-size: 22px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #c4cad4;
|
||||
line-height: 8px;
|
||||
}
|
||||
.color-3267F0 {
|
||||
color: #3267f0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.empty{
|
||||
text-align: center;
|
||||
img{
|
||||
width: 282px;
|
||||
height: 306px;
|
||||
margin: 136px auto 0;
|
||||
}
|
||||
p{
|
||||
font-size: 28px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #999;
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
235
src/project/grid/AppHandSnapshot/Content.vue
Normal file
235
src/project/grid/AppHandSnapshot/Content.vue
Normal file
@@ -0,0 +1,235 @@
|
||||
<template>
|
||||
<div class="Transfer">
|
||||
<div class="contents">
|
||||
<u-form :model="forms" ref="uForm" label-width="auto" :border-bottom="false">
|
||||
<u-form-item label="转交给" prop="status" required :border-bottom="false" right-icon="arrow-right" class="first-form" v-if="status == 1">
|
||||
<u-input v-model="forms.name" placeholder="请选择转交对象" @click="toSelectUser" disabled />
|
||||
</u-form-item>
|
||||
<u-form-item label="事件分类" prop="groupName" required :border-bottom="false" right-icon="arrow-right" v-if="status != 1">
|
||||
<!-- <u-input v-model="forms.groupName" placeholder="请选择事件分类" /> -->
|
||||
<span @click="show = true" class="right-span" :style="forms.groupName ? '' : 'color:#999;'">{{forms.groupName || '请选择事件分类'}}</span>
|
||||
|
||||
<u-select v-model="show" :list="myList" value-name="id" label-name="groupName" @confirm="selectStatus"></u-select>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item :label="status == 3 ? '办结意见' : status == 2 ? '拒绝受理意见' : '办理意见'" prop="content" required :border-bottom="false" label-position="top" class="contents">
|
||||
<u-input v-model="forms.content" :placeholder="status == 2 ? '请写下拒绝受理意见…' : '请写下你的办结意见...'" type="textarea" auto-height height="100" maxlength="500" />
|
||||
</u-form-item>
|
||||
|
||||
<div class="line"></div>
|
||||
|
||||
<u-form-item label="图片上传(最多9张)" prop="files" :border-bottom="false" class="avatars" label-position="top">
|
||||
<AiUploader :def.sync="forms.files" multiple placeholder="上传图片" :limit="9" action="/admin/file/add2"></AiUploader>
|
||||
</u-form-item>
|
||||
|
||||
</u-form>
|
||||
</div>
|
||||
|
||||
<div class="btn" v-if="this.status == 1" @click="confirm">
|
||||
<span>转交事件</span>
|
||||
</div>
|
||||
|
||||
<div class="btn" v-if="this.status == 2" @click="confirm">
|
||||
<span>拒绝受理</span>
|
||||
</div>
|
||||
|
||||
<div class="btn" v-if="this.status == 3" @click="confirm">
|
||||
<span>我已办结</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Content',
|
||||
components: {},
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
forms: {
|
||||
groupName: '',
|
||||
groupId: '',
|
||||
content: '',
|
||||
files: [],
|
||||
name: ''
|
||||
},
|
||||
flag: false,
|
||||
show: false,
|
||||
status: '', //1转交 2拒绝受理 3我已办结
|
||||
myList: [],
|
||||
id: '',
|
||||
selectUser: {},
|
||||
titleList: ['', '转交事件', '拒绝受理', '我已办结']
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
this.status = option.status
|
||||
this.id = option.id
|
||||
this.forms.groupId = option.groupId
|
||||
this.forms.groupName = option.groupName
|
||||
this.typeList()
|
||||
uni.$on('goback', (res) => {
|
||||
this.selectUser = res
|
||||
if(res.name) {
|
||||
this.forms.name = res.name
|
||||
}else{
|
||||
this.forms.name = res.girdName
|
||||
}
|
||||
})
|
||||
},
|
||||
onShow() {
|
||||
console.log(this.titleList[this.status])
|
||||
document.title = this.titleList[this.status]
|
||||
},
|
||||
methods: {
|
||||
|
||||
typeList() {
|
||||
this.$http.post(`/app/appclapeventgroup/list`, null, {
|
||||
params: {
|
||||
size: 9999,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.myList = res.data.records
|
||||
this.$forceUpdate()
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
confirm() {
|
||||
if(this.status == 1 && !this.forms.name) {
|
||||
return this.$u.toast('请选择转交对象')
|
||||
}
|
||||
if(this.status != 1 && !this.forms.groupName) {
|
||||
return this.$u.toast('请选择分类')
|
||||
}
|
||||
if(this.status != 1 && !this.forms.content) {
|
||||
return this.$u.toast('请输入意见')
|
||||
}
|
||||
this.submit()
|
||||
},
|
||||
submit() { //status 1转交 2拒绝受理 3我已办结
|
||||
var url = '', successText= '', params= ''
|
||||
if(this.status == 1) {
|
||||
url = `/app/appclapeventinfo/transfer`
|
||||
successText = '转交成功'
|
||||
params = {
|
||||
...this.forms,
|
||||
girdId: this.selectUser.id,
|
||||
girdName: this.selectUser.girdName,
|
||||
}
|
||||
if(this.selectUser.name) { //选择的网格员
|
||||
params.girdId = this.selectUser.girdId
|
||||
params.girdMemberId = this.selectUser.id
|
||||
params.girdMemberName = this.selectUser.name
|
||||
}
|
||||
}
|
||||
if(this.status == 2) {
|
||||
url = `/app/appclapeventinfo/refuse`
|
||||
successText = '拒绝成功'
|
||||
params = {...this.forms}
|
||||
}
|
||||
if(this.status == 3) {
|
||||
url = `/app/appclapeventinfo/finishByGirdMember`
|
||||
successText = '办结成功'
|
||||
params = {...this.forms}
|
||||
}
|
||||
params.id = this.id
|
||||
this.$http.post(url, params).then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.$u.toast(successText)
|
||||
uni.$emit('updateDeatil')
|
||||
uni.$emit('getListInit')
|
||||
setTimeout(() => {
|
||||
if(this.status == 1) {
|
||||
uni.navigateBack({delta: 2})
|
||||
}else {
|
||||
uni.navigateBack()
|
||||
}
|
||||
},600)
|
||||
}
|
||||
})
|
||||
},
|
||||
selectStatus(e) {
|
||||
this.forms.groupName = e[0].label
|
||||
this.forms.groupId = e[0].value
|
||||
},
|
||||
toSelectUser() {
|
||||
uni.navigateTo({ url: './SelectUser' })
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.Transfer {
|
||||
height: 100%;
|
||||
.contents {
|
||||
padding-bottom: 140px;
|
||||
::v-deep .u-form {
|
||||
.u-form-item {
|
||||
padding: 0 45px !important;
|
||||
.u-form-item__body {
|
||||
.u-form-item--right__content__slot {
|
||||
padding-bottom: 0;
|
||||
.u-input {
|
||||
text-align: right !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.u-form-item:first-child {
|
||||
.u-form-item__body {
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
}
|
||||
|
||||
.line {
|
||||
height: 24px;
|
||||
background: #f3f6f9;
|
||||
}
|
||||
|
||||
.contents {
|
||||
padding-bottom: 20px !important;
|
||||
.u-form-item__body {
|
||||
.u-form-item--right__content__slot {
|
||||
.u-input {
|
||||
text-align: left !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.avatars {
|
||||
padding-bottom: 20px !important;
|
||||
.u-form-item__body {
|
||||
.default {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
background: #3975c6;
|
||||
padding: 34px 0;
|
||||
text-align: center;
|
||||
font-size: 32px;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
}
|
||||
.right-span{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
449
src/project/grid/AppHandSnapshot/Detail.vue
Normal file
449
src/project/grid/AppHandSnapshot/Detail.vue
Normal file
@@ -0,0 +1,449 @@
|
||||
<template>
|
||||
<div class="Detail">
|
||||
<div class="header-top">
|
||||
<div class="avatars" v-if="data.name">{{ data.name.substring(data.name.length, data.name.length - 2) }}</div>
|
||||
|
||||
<div class="right">
|
||||
<div class="names">{{ data.name }}的上报</div>
|
||||
|
||||
<div class="times">{{ data.createTime }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="header-middle">
|
||||
<div class="titles">{{ data.content }}</div>
|
||||
|
||||
<span class="status status0" :class="data.eventStatus == 0 ? 'status0' : data.eventStatus == 1 ? 'status1' : data.eventStatus == 2 ? 'status2' : 'status3'" v-if="data.eventStatus"> {{ $dict.getLabel('clapEventStatus', data.eventStatus) }}</span>
|
||||
|
||||
<div class="card">
|
||||
<span class="card-left">事件类型</span>
|
||||
<span class="card-right">{{ data.groupName }}</span>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<span class="card-left">所属网格</span>
|
||||
<span class="card-right">{{ data.girdName }}</span>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<span class="card-left">联系方式</span>
|
||||
<span class="card-right">
|
||||
<span> {{ data.phone }}</span>
|
||||
<u-icon name="phone-fill" color="#3D94FB" @click="callPhone(data.phone)"></u-icon>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<span class="card-left">上报地址</span>
|
||||
<span class="card-right">
|
||||
<span>{{ data.address }}</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- 暂时先去掉 -->
|
||||
|
||||
<!-- <div class="card">
|
||||
<span class="card-left">上报来源</span>
|
||||
<span class="card-right">三角湖居民社群 李毅 小程序填报三角湖居民社群 李毅 小程序填报三角湖居民社群 李毅 小程序填报</span>
|
||||
</div> -->
|
||||
|
||||
<div class="cards">
|
||||
<span class="card-left" style="color:#999">照片</span>
|
||||
</div>
|
||||
|
||||
<img :src="item.url" alt="" v-for="(item, i) in data.files" :key="i" @click="previewImage(data.files, item.url)" />
|
||||
</div>
|
||||
|
||||
<div class="header-bottom">
|
||||
<div class="line"></div>
|
||||
|
||||
<div class="plan">
|
||||
<div class="nav">
|
||||
<span>办理进度</span>
|
||||
<span> ({{ $dict.getLabel('clapEventStatus', data.eventStatus) }})</span>
|
||||
</div>
|
||||
|
||||
<div class="cards" v-for="(item, index) in data.processList" :key="index">
|
||||
<div class="cardss">
|
||||
<div class="cardss-left">
|
||||
<span>
|
||||
<!-- {{ item.systemExplain }} -->
|
||||
{{ item.girdMemberName && item.girdMemberName.substring(item.girdMemberName.length, item.girdMemberName.length - 2) }}
|
||||
</span>
|
||||
|
||||
<!-- <img src="./components/1.png" class="avatarIcon" alt="" /> -->
|
||||
</div>
|
||||
|
||||
<div class="cardss-right">
|
||||
<div class="cardsss-right-left">
|
||||
<div class="cardssss-right-left-top">
|
||||
<span>{{ item.systemExplain }}</span>
|
||||
<div style="color: #2ea222; font-size: 16px; margin-top: 5px">
|
||||
{{ $dict.getLabel('clapDoStatus', item.doStatus) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cardees-right-right">{{ item.doTime }}</div>
|
||||
</div>
|
||||
|
||||
<div class="lines"></div>
|
||||
</div>
|
||||
|
||||
<div class="cardes-msg-top" v-if="item.doExplain">{{ item.doExplain }}</div>
|
||||
|
||||
<div class="imgs">
|
||||
<img :src="e.url" alt="" v-for="(e, index) in item.files" :key="index" @click="previewImage(item.files, e.url)" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fixedBtn">
|
||||
<div class="status00" v-if="data.eventStatus == 0">
|
||||
<div class="columns border-r" @click="toContent(1)">
|
||||
<!-- <img src="./components/img/zhuanjiao.png" alt="" /> -->
|
||||
<span class="hint">转交事件</span>
|
||||
</div>
|
||||
|
||||
<div class="columns" @click="toContent(2)">
|
||||
<!-- <img src="./components/img/jujue.png" alt="" /> -->
|
||||
<span class="hint">拒绝受理</span>
|
||||
</div>
|
||||
|
||||
<div class="doIt" @click="doItShow = true">我来受理</div>
|
||||
</div>
|
||||
|
||||
<div class="endDoIt" v-if="data.eventStatus == 1 && data.rightType == 0" @click="toContent(3)">前往办理</div>
|
||||
</div>
|
||||
|
||||
<u-modal v-model="doItShow" :mask-close-able="true" z-index="99" content="确定受理该事件?" :show-cancel-button="true" @confirm="doThings"></u-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Detail',
|
||||
components: {},
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
data: {},
|
||||
id: '',
|
||||
doItShow: false,
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
watch: {},
|
||||
onLoad(o) {
|
||||
this.id = o.id
|
||||
this.$dict.load('realityStatus', 'clapDoStatus').then(() => {
|
||||
this.getDetail()
|
||||
})
|
||||
|
||||
uni.$on('updateDeatil', () => {
|
||||
this.getDetail()
|
||||
})
|
||||
},
|
||||
onShow() {
|
||||
document.title = '随手拍'
|
||||
},
|
||||
methods: {
|
||||
getDetail() {
|
||||
this.$http.post(`/app/appclapeventinfo/queryDetailById?id=${this.id}`).then((res) => {
|
||||
if (res?.data) {
|
||||
this.data = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
callPhone(phone) {
|
||||
uni.makePhoneCall({ phoneNumber: phone })
|
||||
},
|
||||
|
||||
doThings() {
|
||||
this.$http.post(`/app/appclapeventinfo/acceptance?id=${this.id}`).then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.getDetail()
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
toContent(status) {
|
||||
uni.navigateTo({ url: `./Content?status=${status}&groupId=${this.data.groupId}&groupName=${this.data.groupName}&id=${this.id}` })
|
||||
},
|
||||
previewImage(images, img) {
|
||||
uni.previewImage({
|
||||
urls: images.map(v => v.url),
|
||||
current: img
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
uni-page-body {
|
||||
height: 100%;
|
||||
}
|
||||
.Detail {
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
|
||||
.header-top {
|
||||
display: flex;
|
||||
margin: 26px 0 14px 0;
|
||||
padding: 0 32px;
|
||||
.avatars {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
background: #3975c6;
|
||||
border-radius: 50%;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
font-size: 28px;
|
||||
font-weight: 500;
|
||||
margin-right: 16px;
|
||||
}
|
||||
.right {
|
||||
.names {
|
||||
font-size: 32px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.times {
|
||||
margin-top: 10px;
|
||||
font-size: 28px;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-middle {
|
||||
padding: 0 32px 10px 32px;
|
||||
.titles {
|
||||
margin: 32px 0;
|
||||
line-height: 1.4;
|
||||
word-break: break-all;
|
||||
font-size: 40px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.status {
|
||||
display: inline-block;
|
||||
margin-bottom: 14px;
|
||||
padding: 4px 8px;
|
||||
font-size: 26px;
|
||||
color: #ffffff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.status0 {
|
||||
background: #ff883c;
|
||||
}
|
||||
|
||||
.status1 {
|
||||
background: #1aaaff;
|
||||
}
|
||||
|
||||
.status2 {
|
||||
background: #42d784;
|
||||
}
|
||||
|
||||
.status3 {
|
||||
background: #ff4466;
|
||||
}
|
||||
|
||||
.card {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 34px 0;
|
||||
border-bottom: 1px solid #ddd;
|
||||
.card-left {
|
||||
width: 46%;
|
||||
font-size: 32px;
|
||||
color: #999999;
|
||||
}
|
||||
.card-right {
|
||||
font-size: 32px;
|
||||
.u-icon {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// .card:last-child {
|
||||
// border-bottom: none;
|
||||
// }
|
||||
|
||||
.cards {
|
||||
padding: 34px 0;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 225px;
|
||||
height: 226px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
img:nth-child(3n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.header-bottom {
|
||||
padding-bottom: 80px;
|
||||
.line {
|
||||
height: 16px;
|
||||
background: #f3f6f9;
|
||||
}
|
||||
|
||||
.plan {
|
||||
padding: 0 32px;
|
||||
.nav {
|
||||
padding: 26px 0;
|
||||
}
|
||||
|
||||
.cards {
|
||||
position: relative;
|
||||
padding-bottom: 80px;
|
||||
.cardss {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.cardss-left {
|
||||
position: relative;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
text-align: center;
|
||||
line-height: 80px;
|
||||
color: #fff;
|
||||
background: #197df0;
|
||||
border: 1px solid #dddddd;
|
||||
border-radius: 50%;
|
||||
font-size: 28px;
|
||||
z-index: 9;
|
||||
// img {
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// border-radius: 50%;
|
||||
// }
|
||||
.avatarIcon {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
}
|
||||
}
|
||||
.cardss-right {
|
||||
width: calc(100% - 110px);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.cardsss-right-left {
|
||||
.cardssss-right-left-top {
|
||||
width: 300px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 32px;
|
||||
}
|
||||
.cardssss-right-left-bottom {
|
||||
margin-top: 10px;
|
||||
font-size: 28px;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
.cardees-right-right {
|
||||
font-size: 28px;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
.lines {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 40px;
|
||||
width: 4px;
|
||||
height: 100%;
|
||||
background: #eeeeee;
|
||||
}
|
||||
}
|
||||
.cardes-msg-top {
|
||||
font-size: 28px;
|
||||
color: #343d65;
|
||||
margin-top: 10px;
|
||||
margin-left: 110px;
|
||||
}
|
||||
|
||||
.imgs {
|
||||
margin-top: 10px;
|
||||
margin-left: 110px;
|
||||
img {
|
||||
width: 136px;
|
||||
height: 136px;
|
||||
border-radius: 4px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
img:nth-child(4n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.cards:last-child {
|
||||
.lines {
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fixedBtn {
|
||||
background: #fff;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
z-index: 999;
|
||||
.status00 {
|
||||
display: flex;
|
||||
|
||||
.columns {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 22%;
|
||||
padding: 16px 0;
|
||||
border-top: 1px solid #ddd;
|
||||
img {
|
||||
width: 44px;
|
||||
height: 42px;
|
||||
}
|
||||
.hint {
|
||||
margin-top: 4px;
|
||||
font-size: 28px;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
.border-r {
|
||||
border-right: 1px solid #ddd;
|
||||
}
|
||||
.doIt {
|
||||
width: 56%;
|
||||
background: #3975c6;
|
||||
text-align: center;
|
||||
line-height: 112px;
|
||||
font-size: 36px;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.endDoIt {
|
||||
background: #3975c6;
|
||||
text-align: center;
|
||||
padding: 34px 0;
|
||||
|
||||
font-size: 32px;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
310
src/project/grid/AppHandSnapshot/List.vue
Normal file
310
src/project/grid/AppHandSnapshot/List.vue
Normal file
@@ -0,0 +1,310 @@
|
||||
<template>
|
||||
<div class="list">
|
||||
<AiTopFixed>
|
||||
<u-tabs :list="tabList" :is-scroll="false" :current="currentTabs" height="96" bg-color="#3975C6" inactive-color="#fff" active-color="#fff" @change="change"></u-tabs>
|
||||
<div class="select-top">
|
||||
<div class="tab-item" @click="show = true">
|
||||
<span class="color-666">{{girdNameText}}</span>
|
||||
<img src="./components/img/down-icon.png" alt="" />
|
||||
</div>
|
||||
|
||||
<u-select v-model="show" :list="myGirdList" value-name="id" label-name="girdName" @confirm="confirm"></u-select>
|
||||
|
||||
<div class="tab-item" @click="showType = true">
|
||||
<span class="color-666">{{eventStatusText}}</span>
|
||||
<img src="./components/img/down-icon.png" alt="" />
|
||||
</div>
|
||||
|
||||
<u-select v-model="showType" :list="listType" value-name="dictValue" label-name="dictName" @confirm="confirm"></u-select>
|
||||
</div>
|
||||
</AiTopFixed>
|
||||
|
||||
<template >
|
||||
<AiCard v-for="(item, i) in datas" :key="i" @click.native="goDetail(item, 1)">
|
||||
<template #custom>
|
||||
<div class="card-top">
|
||||
<div class="titles">{{ item.content }}</div>
|
||||
|
||||
<div class="types">
|
||||
<span>事件类型</span>
|
||||
<span class="types-right">{{ item.groupName }}</span>
|
||||
</div>
|
||||
|
||||
<div class="gards">
|
||||
<span>所属网格</span>
|
||||
<span class="gards-right">{{ item.girdName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="status" :class="item.eventStatus == 0 ? 'status0' : item.eventStatus == 1 ? 'status1' : item.eventStatus == 2 ? 'status2' : 'status3'" v-if="item.eventStatus">
|
||||
<span class="icon"></span>
|
||||
<span>
|
||||
{{ $dict.getLabel('clapEventStatus', item.eventStatus) }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</AiCard>
|
||||
<AiEmpty v-if="!datas.length"></AiEmpty>
|
||||
</template>
|
||||
|
||||
<div class="pad-b120" v-if="datas.length"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
export default {
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
datas: [],
|
||||
tabList: [
|
||||
{
|
||||
name: '全部待办',
|
||||
},
|
||||
{
|
||||
name: '办件历史',
|
||||
},
|
||||
],
|
||||
currentTabs: 0,
|
||||
current: 1,
|
||||
pages: 0,
|
||||
show: false,
|
||||
myGirdList: [],
|
||||
girdId: '',
|
||||
girdNameText: '所属网格',
|
||||
showType: false,
|
||||
listType: [],
|
||||
eventStatus: '',
|
||||
eventStatusText: '办件状态',
|
||||
listTypeHistory: [],
|
||||
listTypeAll: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
|
||||
loadmore() {
|
||||
return this.pages <= this.current ? 'loading ' : 'nomore'
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.current = 1
|
||||
this.girdList()
|
||||
this.getList()
|
||||
uni.$on('nextList', ()=>{
|
||||
this.current ++
|
||||
this.getList()
|
||||
})
|
||||
uni.$on('getListInit', ()=>{
|
||||
this.current = 1
|
||||
this.getList()
|
||||
})
|
||||
|
||||
},
|
||||
onShow() {
|
||||
document.title = '随手拍'
|
||||
},
|
||||
created() {
|
||||
this.$dict.load('clapEventStatus', 'clapEventStatusAll', 'clapEventStatusHistory').then(() => {
|
||||
this.getList()
|
||||
this.listTypeAll = this.$dict.getDict('clapEventStatusAll')
|
||||
this.listTypeHistory = this.$dict.getDict('clapEventStatusHistory')
|
||||
this.listType = this.listTypeAll
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
this.$http
|
||||
.post(`/app/appclapeventinfo/listByGirdMember`, null, {
|
||||
params: {
|
||||
size: 10,
|
||||
current: this.current,
|
||||
searchType: this.currentTabs == 1 ? '1' : '0',
|
||||
eventStatus: this.eventStatus,
|
||||
girdId: this.girdId
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.datas = this.current > 1 ? [...this.datas, ...res.data.records] : res.data.records
|
||||
this.pages = res.data.pages
|
||||
this.$forceUpdate()
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
girdList() {
|
||||
this.$http.post(`/app/appgirdmemberinfo/queryMyGirdListWithOut01`, null, {
|
||||
params: {
|
||||
size: 9999,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.myGirdList = res.data
|
||||
var all = {
|
||||
id: '',
|
||||
girdName: '全部'
|
||||
}
|
||||
this.myGirdList.unshift(all)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
confirm(e) {
|
||||
if (this.show) {
|
||||
this.girdNameText = e[0].label
|
||||
this.girdId = e[0].value
|
||||
}
|
||||
if (this.showType) {
|
||||
this.eventStatus = e[0].value
|
||||
this.eventStatusText = e[0].label
|
||||
}
|
||||
|
||||
this.current = 1
|
||||
this.getList()
|
||||
},
|
||||
|
||||
goDetail(item) {
|
||||
uni.navigateTo({ url: `./Detail?id=${item.id}` })
|
||||
},
|
||||
|
||||
change(index) {
|
||||
this.current = 1
|
||||
this.datas = []
|
||||
this.eventStatus = ''
|
||||
this.girdId = ''
|
||||
this.girdNameText = '所属网格'
|
||||
this.eventStatusText = '办件状态'
|
||||
this.currentTabs = index
|
||||
if(index == 0) {
|
||||
this.listType = this.listTypeAll
|
||||
}else {
|
||||
this.listType = this.listTypeHistory
|
||||
}
|
||||
this.getList()
|
||||
},
|
||||
|
||||
linkTo(url) {
|
||||
uni.navigateTo({ url })
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
uni-page-body {
|
||||
height: 100%;
|
||||
}
|
||||
.list {
|
||||
height: 100%;
|
||||
.select-top {
|
||||
background: #fff;
|
||||
display: flex;
|
||||
padding: 24px 0;
|
||||
.tab-item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
line-height: 48px;
|
||||
font-size: 26px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #666;
|
||||
img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-left: 8px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
.tab-item:nth-of-type(1) {
|
||||
border-right: 1px solid #eee;
|
||||
}
|
||||
}
|
||||
::v-deep .AiTopFixed .content {
|
||||
padding: 0;
|
||||
}
|
||||
::v-deep .AiCard {
|
||||
background: #f3f6f9;
|
||||
padding: 24px 40px 0 32px;
|
||||
.start {
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
.card-top {
|
||||
padding: 32px;
|
||||
.titles {
|
||||
margin-bottom: 34px;
|
||||
font-size: 32px;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
line-height: 1.4;
|
||||
word-break: break-all;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.types,
|
||||
.gards {
|
||||
margin-top: 8px;
|
||||
font-size: 26px;
|
||||
.types-right,
|
||||
.gards-right {
|
||||
margin-left: 32px;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status {
|
||||
padding: 32px;
|
||||
border-top: 1px solid #dddddd;
|
||||
.icon {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
vertical-align: middle;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.status0 {
|
||||
color: #ff883c;
|
||||
.icon {
|
||||
background: #ff883c;
|
||||
}
|
||||
}
|
||||
|
||||
.status1 {
|
||||
color: #1aaaff;
|
||||
.icon {
|
||||
background: #1aaaff;
|
||||
}
|
||||
}
|
||||
|
||||
.status2 {
|
||||
color: #42d784;
|
||||
.icon {
|
||||
background: #42d784;
|
||||
}
|
||||
}
|
||||
|
||||
.status3 {
|
||||
color: #ff4466;
|
||||
.icon {
|
||||
background: #ff4466;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// ::v-deep .AiCard:last-child {
|
||||
// padding-bottom: 24px;
|
||||
// }
|
||||
.pad-b120 {
|
||||
background-color: #f3f6f9;
|
||||
padding-bottom: 120px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
211
src/project/grid/AppHandSnapshot/PercentageDetail.vue
Normal file
211
src/project/grid/AppHandSnapshot/PercentageDetail.vue
Normal file
@@ -0,0 +1,211 @@
|
||||
<template>
|
||||
<div class="PercentageDetail">
|
||||
<div class="header">
|
||||
<div class="left">
|
||||
<h2>小区管理</h2>
|
||||
<p>共21条，已办结18条</p>
|
||||
</div>
|
||||
<div class="right">
|
||||
<h4>86%</h4>
|
||||
<p>办结率</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-content">
|
||||
<div class="title">分类统计</div>
|
||||
<div class="percentage">
|
||||
<div class="item">
|
||||
<div class="mini-title">小区管理</div>
|
||||
<div class="info">
|
||||
<div class="line-bg"><div class="active-bg"></div></div>共11条 | 已办结9
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="mini-title">小区管理</div>
|
||||
<div class="info">
|
||||
<div class="line-bg" style="width:44%;"><div class="active-bg"></div></div>共11条 | 已办结9
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="mini-title">小区管理</div>
|
||||
<div class="info">
|
||||
<div class="line-bg" style="width:30%;"><div class="active-bg"></div></div>共11条 | 已办结9
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
contents: [
|
||||
{
|
||||
label: '待受理',
|
||||
num: 5
|
||||
},
|
||||
{
|
||||
label: '办理中',
|
||||
num: 5
|
||||
},
|
||||
{
|
||||
label: '今日上报',
|
||||
num: 5
|
||||
},
|
||||
{
|
||||
label: '今日办结',
|
||||
num: 5
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
onShow() {},
|
||||
methods: {
|
||||
getList() {
|
||||
this.$http
|
||||
.post('/app/appvisitvondolence/list', null, {
|
||||
params: {
|
||||
size: this.size,
|
||||
current: this.current,
|
||||
createUserId: this.currentTabs == 1 ? this.user.id : '',
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.datas = this.current > 1 ? [...this.datas, ...res.data.records] : res.data.records
|
||||
this.pages = res.data.pages
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
goDetail(item) {
|
||||
uni.navigateTo({ url: `./Detail?id=${item.id}` })
|
||||
},
|
||||
|
||||
change(index) {
|
||||
this.currentTabs = index
|
||||
this.getList()
|
||||
},
|
||||
},
|
||||
onReachBottom() {
|
||||
this.current = this.current + 1
|
||||
this.getList()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.PercentageDetail {
|
||||
background-color: #F3F7F8;
|
||||
padding: 32px 30px 0;
|
||||
.header{
|
||||
width: 100%;
|
||||
background: #FFF;
|
||||
border-radius: 16px;
|
||||
margin-bottom: 30px;
|
||||
display: flex;
|
||||
padding: 32px 32px 38px 24px;
|
||||
box-sizing: border-box;
|
||||
.left{
|
||||
width: calc(100% - 112px);
|
||||
h2{
|
||||
font-size: 42px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #333;
|
||||
line-height: 48px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
p{
|
||||
font-size: 30px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #999;
|
||||
line-height: 42px;
|
||||
}
|
||||
}
|
||||
.right{
|
||||
width: 112px;
|
||||
background: #E6FFF1;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
color: #42D784;
|
||||
h4{
|
||||
font-size: 36px;
|
||||
font-family: DINAlternate-Bold, DINAlternate;
|
||||
font-weight: bold;
|
||||
line-height: 42px;
|
||||
padding: 8px 0 4px 0;
|
||||
}
|
||||
p{
|
||||
font-size: 24px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
line-height: 34px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.info-content{
|
||||
width: 100%;
|
||||
background: #FFF;
|
||||
border-radius: 16px;
|
||||
margin-bottom: 24px;
|
||||
.title{
|
||||
font-size: 32px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #333;
|
||||
line-height: 48px;
|
||||
padding: 24px 16px 24px 24px;
|
||||
img{
|
||||
float: right;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
.percentage{
|
||||
padding: 16px 0 0 26px;
|
||||
.item{
|
||||
width: 100%;
|
||||
padding-bottom: 32px;
|
||||
.mini-title{
|
||||
font-size: 30px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #333;
|
||||
line-height: 48px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.info{
|
||||
width: 100%;
|
||||
font-size: 28px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #999;
|
||||
line-height: 48px;
|
||||
.line-bg{
|
||||
display: inline-block;
|
||||
width: 56%;
|
||||
height: 14px;
|
||||
background: #D7D8D9;
|
||||
border-radius: 8px;
|
||||
margin-right: 12px;
|
||||
.active-bg{
|
||||
width: 80%;
|
||||
height: 100%;
|
||||
background: #257FF1;
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
img{
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -2,15 +2,35 @@
|
||||
<div class="SelectUser">
|
||||
<div class="header-middle">
|
||||
<div class="hint">
|
||||
<u-search v-model="name" placeholder="请输入姓名" :show-action="false" bg-color="#F5F5F5" search-icon-color="#999" color="#999" height="58" @search="getListInit" :clearabled="false"></u-search>
|
||||
<span v-for="(item, index) in slectList" :key="index"><span v-if="index" style="margin:0 4px;">/</span><span style="color:#3F8DF5" @click="girdNameClick(item, index)">{{item.girdName}}</span></span>
|
||||
</div>
|
||||
|
||||
<div class="showUsers">
|
||||
<div class="showTypes" v-if="!userList.length">
|
||||
<div v-if="treeList.length > 0">
|
||||
<div class="cards" v-for="(item, index) in treeList" :key="index" @click="itemClick(item)">
|
||||
<div class="imges">
|
||||
<span v-if="item.girdLevel == 2">
|
||||
<img src="./components/img/xzh.png" alt="" class="imgselect" v-if="item.isChecked" @click.stop="girdClick(item, index)" />
|
||||
<img src="./components/img/xz.png" alt="" class="imgselect" v-else @click.stop="girdClick(item, index)" />
|
||||
</span>
|
||||
<img src="./components/img/gird--select-icon.png" alt="" class="avatras" />
|
||||
</div>
|
||||
<div class="rightes">
|
||||
<div class="applicationNames">{{ item.girdName }}</div>
|
||||
<img src="./components/img/right-icon.png" alt="" class="imgs" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<AiEmpty description="暂无数据" class="emptyWrap" v-else></AiEmpty>
|
||||
</div>
|
||||
|
||||
<div class="showUsers" v-else>
|
||||
<div v-if="userList.length > 0">
|
||||
<div class="cards" v-for="(e, index) in userList" :key="index">
|
||||
<div class="imges">
|
||||
<img src="./components/img/xzh.png" alt="" class="imgselect" v-if="e.isChecked" @click="userClick(index)" />
|
||||
<img src="./components/img/xz.png" alt="" class="imgselect" v-else @click="userClick(index)" />
|
||||
<img src="./components/img/xzh.png" alt="" class="imgselect" v-if="e.isChecked" @click="userClick(e, index)" />
|
||||
<img src="./components/img/xz.png" alt="" class="imgselect" v-else @click="userClick(e, index)" />
|
||||
|
||||
<img src="./components/img/tx@2x.png" alt="" class="avatras" />
|
||||
</div>
|
||||
@@ -25,7 +45,7 @@
|
||||
<AiEmpty description="暂无数据" class="emptyWrap" v-else></AiEmpty>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pad-b140"></div>
|
||||
|
||||
<div class="subBtn" @click="submit">
|
||||
<div>确定选择</div>
|
||||
</div>
|
||||
@@ -38,71 +58,135 @@ export default {
|
||||
name: 'SelectUser',
|
||||
data() {
|
||||
return {
|
||||
selectUserList: [],
|
||||
selectUser: {},
|
||||
allData: null,
|
||||
treeList: [],
|
||||
slectList: [],
|
||||
userList: [],
|
||||
name: '',
|
||||
current: 1
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.selectUserList = uni.getStorageSync('selectUserList')
|
||||
this.selectUserList.map((item) => {
|
||||
item.id =item.wxUserId
|
||||
item.mobile = item.phone
|
||||
item.avatar = item.photo
|
||||
})
|
||||
this.getList()
|
||||
this.getTree()
|
||||
},
|
||||
onShow() {
|
||||
document.title = '选择人员'
|
||||
},
|
||||
methods: {
|
||||
getListInit() {
|
||||
this.userList = []
|
||||
this.current = 1
|
||||
this.getList()
|
||||
},
|
||||
getList() {
|
||||
this.$http.post(`/app/wxcp/wxuser/list?name=${this.name}¤t=${this.current}&size=10000`).then((res) => {
|
||||
getTree() {
|
||||
this.slectList = []
|
||||
this.$http.post('/app/appgirdinfo/listAllByTop').then((res) => {
|
||||
if (res?.data) {
|
||||
res.data.records.map((item) => {
|
||||
item.isChecked = false
|
||||
})
|
||||
|
||||
this.userList = this.current > 1 ? [...this.userList, ...res.data.records] : res.data.records
|
||||
|
||||
this.userList.map((item) => {
|
||||
this.selectUserList.map((e) => {
|
||||
if(e.id == item.id) {
|
||||
item.isChecked = true
|
||||
}
|
||||
})
|
||||
})
|
||||
this.allData = res.data
|
||||
this.treeInit()
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
userClick(index) {
|
||||
this.userList[index].isChecked = !this.userList[index].isChecked
|
||||
treeInit() {
|
||||
if(this.allData[0].girdLevel == 2) {
|
||||
if(this.allData[0].girdMemberList && this.allData[0].girdMemberList.length) {
|
||||
this.userList = this.allData[0].girdMemberList
|
||||
this.userList.map((item) => {
|
||||
item.isChecked = false
|
||||
})
|
||||
}
|
||||
}else {
|
||||
this.treeList = this.allData[0].girdList
|
||||
}
|
||||
var obj = {
|
||||
girdName: this.allData[0].girdName,
|
||||
id: this.allData[0].id,
|
||||
girdLevel: this.allData[0].girdLevel
|
||||
}
|
||||
this.slectList.push(obj)
|
||||
},
|
||||
|
||||
itemClick(row) {
|
||||
console.log(row)
|
||||
var obj = {
|
||||
girdName: row.girdName,
|
||||
id: row.id,
|
||||
girdLevel: row.girdLevel
|
||||
}
|
||||
this.slectList.push(obj)
|
||||
this.searckGird(row)
|
||||
},
|
||||
|
||||
searckGird(row) {
|
||||
this.treeList = []
|
||||
if(row.girdLevel != 2) { //查网格
|
||||
this.$http.post(`/app/appgirdinfo/list?parentGirdId=${row.id}&size=999`).then((res) => {
|
||||
if (res?.data) {
|
||||
this.treeList = res.data.records
|
||||
}
|
||||
})
|
||||
}else { //查网格员
|
||||
this.userList = []
|
||||
this.$http.post(`/app/appgirdmemberinfo/listByGirdIdByThree?girdId=${row.id}`).then((res) => {
|
||||
if (res?.data) {
|
||||
this.userList = res.data
|
||||
this.userList.map((item) => {
|
||||
item.isChecked = false
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
girdNameClick(row, index) {
|
||||
this.userList = []
|
||||
if(!index) { //第一级别
|
||||
this.slectList = []
|
||||
this.treeInit()
|
||||
}else {
|
||||
var list = []
|
||||
this.slectList.map((item, i) => {
|
||||
if(i <= index) {
|
||||
list.push(item)
|
||||
}
|
||||
})
|
||||
this.slectList = list
|
||||
this.searckGird(row)
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
girdClick(row, index) {
|
||||
if (this.treeList[index].isChecked) {//取消
|
||||
this.treeList[index].isChecked = false
|
||||
this.selectUser = {}
|
||||
} else {
|
||||
this.treeList.map((item) => {
|
||||
item.isChecked = false
|
||||
})
|
||||
this.treeList[index].isChecked = true
|
||||
this.selectUser = row
|
||||
}
|
||||
this.$forceUpdate()
|
||||
},
|
||||
|
||||
userClick(row, index) {
|
||||
if (this.userList[index].isChecked) {//取消
|
||||
this.userList[index].isChecked = false
|
||||
this.selectUser = {}
|
||||
} else {
|
||||
this.userList.map((item) => {
|
||||
item.isChecked = false
|
||||
})
|
||||
this.userList[index].isChecked = true
|
||||
this.selectUser = row
|
||||
}
|
||||
this.$forceUpdate()
|
||||
},
|
||||
|
||||
submit() {
|
||||
var selectUserList = []
|
||||
this.userList.map((item) => {
|
||||
if(item.isChecked) {
|
||||
selectUserList.push(item)
|
||||
}
|
||||
})
|
||||
uni.$emit('selectUser', selectUserList)
|
||||
uni.navigateBack()
|
||||
// if (!selectUserList.length) {
|
||||
// return this.$u.toast('请选择人员')
|
||||
// } else {
|
||||
|
||||
// }
|
||||
if (this.selectUser.id != null) {
|
||||
uni.$emit('goback', this.selectUser)
|
||||
uni.navigateBack()
|
||||
} else {
|
||||
return this.$u.toast('请选择网格或网格员')
|
||||
}
|
||||
},
|
||||
},
|
||||
onReachBottom() {
|
||||
this.current ++
|
||||
this.getList()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -111,15 +195,13 @@ export default {
|
||||
.SelectUser {
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
.pad-b140{
|
||||
padding-bottom: 140px;
|
||||
}
|
||||
.header-top {
|
||||
background: #fff;
|
||||
padding: 20px 32px;
|
||||
}
|
||||
|
||||
.header-middle {
|
||||
padding-bottom: 140px;
|
||||
.hint {
|
||||
padding: 28px 20px 28px 32px;
|
||||
line-height: 56px;
|
||||
76
src/project/grid/AppHandSnapshot/Set.vue
Normal file
76
src/project/grid/AppHandSnapshot/Set.vue
Normal file
@@ -0,0 +1,76 @@
|
||||
<template>
|
||||
<div class="set">
|
||||
<div class="info-content" @click="toSetList">
|
||||
<img src="./components/img/setting-icon.png" alt="" class="set-icon">
|
||||
<div class="info">
|
||||
<h2>配置事件类别</h2>
|
||||
<p>提交上报时选择事件类别，有助于管理上报和统计分析</p>
|
||||
</div>
|
||||
<img src="./components/img/right-icon.png" alt="" class="right-icon">
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toSetList() {
|
||||
uni.navigateTo({url: './SetList'})
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
uni-page-body {
|
||||
height: 100%;
|
||||
}
|
||||
.set {
|
||||
height: 100%;
|
||||
padding: 32px 30px 0;
|
||||
box-sizing: border-box;
|
||||
background-color: #F3F7F8;
|
||||
.info-content{
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
padding: 40px 8px 34px 40px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
.set-icon{
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-right: 44px;
|
||||
}
|
||||
.info{
|
||||
display: inline-block;
|
||||
width: calc(100% - 216px);
|
||||
h2{
|
||||
font-size: 36px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #333;
|
||||
line-height: 48px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
p{
|
||||
width: 100%;
|
||||
font-size: 28px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #999;
|
||||
line-height: 40px;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
.right-icon{
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
margin-left: 76px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
122
src/project/grid/AppHandSnapshot/SetList.vue
Normal file
122
src/project/grid/AppHandSnapshot/SetList.vue
Normal file
@@ -0,0 +1,122 @@
|
||||
<template>
|
||||
<div class="SetList">
|
||||
<div class="header">
|
||||
<div class="title">事件类别</div>
|
||||
<p>成员上报时需要选择事件类别，上报会按照分类进行统计。</p>
|
||||
</div>
|
||||
<div class="set-list">
|
||||
<div class="item">
|
||||
<div class="title">小区管理</div>
|
||||
<div class="tips-list">
|
||||
<span class="tips">公共部位设置地桩锁</span>
|
||||
<span class="tips">公共部位桩锁</span>
|
||||
<span class="tips">地桩锁</span>
|
||||
<span class="tips">公共部位设置地桩锁</span>
|
||||
<span class="tips">公共部位桩锁</span>
|
||||
<span class="tips">地桩锁</span>
|
||||
<span class="tips">公共部位设置地桩锁</span>
|
||||
<span class="tips">公共部位桩锁</span>
|
||||
<span class="tips">地桩锁</span>
|
||||
</div>
|
||||
<img src="./components/img/right-icon.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn" @click="toAddSet">新建分类</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'SetList',
|
||||
components: {},
|
||||
props: {
|
||||
dict: Object,
|
||||
instance: Function,
|
||||
params: Object,
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
toAddSet() {
|
||||
uni.navigateTo({url: './AddSet'})
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.SetList {
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
.header{
|
||||
padding: 40px 30px 74px;
|
||||
.title{
|
||||
font-size: 42px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #333;
|
||||
line-height: 48px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
p{
|
||||
width: 100%;
|
||||
font-size: 30px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #999;
|
||||
line-height: 42px;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
.set-list{
|
||||
padding: 0 28px 120px;
|
||||
.item{
|
||||
width: 100%;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px solid #E9EAEB;
|
||||
position: relative;
|
||||
.title{
|
||||
font-size: 34px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #333;
|
||||
line-height: 48px;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
.tips-list{
|
||||
width: calc(100% - 68px);
|
||||
}
|
||||
.tips{
|
||||
display: inline-block;
|
||||
line-height: 64px;
|
||||
background: #F7F8F9;
|
||||
border-radius: 8px;
|
||||
padding: 0 20px;
|
||||
font-size: 30px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #999;
|
||||
margin: 0 16px 24px 0;
|
||||
}
|
||||
img{
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn{
|
||||
width: 100%;
|
||||
line-height: 112px;
|
||||
background: #3975C6;
|
||||
box-shadow: inset 0px 1px 0px 0px #EEEEEE;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
text-align: center;
|
||||
font-size: 32px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #FFF;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
353
src/project/grid/AppHandSnapshot/Statistics.vue
Normal file
353
src/project/grid/AppHandSnapshot/Statistics.vue
Normal file
@@ -0,0 +1,353 @@
|
||||
<template>
|
||||
<div class="statistics" v-if="pageShow">
|
||||
<!-- <div class="gird-select">
|
||||
<img src="./components/img/gird-icon.png" alt="">
|
||||
<span>{{girdName}}</span>
|
||||
<img src="./components/img/down-icon.png" alt="">
|
||||
</div>
|
||||
<u-select v-model="showSelect" :list="myGirdList" value-name="id" label-name="girdName" @confirm="confirm"></u-select> -->
|
||||
<div class="info-content">
|
||||
<div class="title">今日概况</div>
|
||||
<div class="el-row">
|
||||
<div class="item" v-for="(item, index) in todayList" :key="index">
|
||||
<h2>{{item.value}}</h2>
|
||||
<p>{{item.label}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-content">
|
||||
<div class="title">业务透视</div>
|
||||
<div class="business">
|
||||
<div class="left">
|
||||
<div class="item">
|
||||
<p>受理率</p>
|
||||
<h2>{{info.businessCountMap['受理率'] || '0'}}%</h2>
|
||||
</div>
|
||||
<div class="item">
|
||||
<p>办结率</p>
|
||||
<h2>{{info.businessCountMap['办结率'] || '0'}}%</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="img">
|
||||
<img src="./components/img/line-img.png" alt="">
|
||||
<img src="./components/img/line-img.png" alt="">
|
||||
</div>
|
||||
<div class="num">
|
||||
<div class="item bg1">
|
||||
<h2>累计反馈</h2>
|
||||
<p>{{info.businessCountMap['累计反馈'] || '0'}}</p>
|
||||
</div>
|
||||
<div class="item bg2">
|
||||
<h2>累计受理</h2>
|
||||
<p>{{info.businessCountMap['累计受理'] || '0'}}</p>
|
||||
</div>
|
||||
<div class="item bg3">
|
||||
<h2>累计办理</h2>
|
||||
<p>{{info.businessCountMap['累计办结'] || '0'}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-content">
|
||||
<div class="title" @click="toPercentageDetail">分类统计
|
||||
<!-- <img src="./components/img/right-icon.png" alt=""> -->
|
||||
</div>
|
||||
<div class="percentage">
|
||||
<div class="item" v-for="(item, index) in info.groupList" :key="index">
|
||||
<div class="mini-title">{{item.groupName}}</div>
|
||||
<div class="info">
|
||||
<div class="line-bg" :style="`width:${item.width}%`" ><div class="active-bg" :style="`width:${item.percentage*100}%`"></div></div>共{{item.totalNum}}条 | 已办结{{item.finishNum}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="info-content" @click="toUserList">
|
||||
<div class="title">成员明细
|
||||
<img src="./components/img/right-icon.png" alt="">
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="pad-b120"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
todayList: [],
|
||||
info: {},
|
||||
pageShow: false,
|
||||
myGirdList: [],
|
||||
showSelect: false,
|
||||
myGirdList: [],
|
||||
girdName: '全部网格'
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.girdList()
|
||||
this.getStatistics()
|
||||
},
|
||||
methods: {
|
||||
getStatistics() {
|
||||
this.$http.post('/app/appclapeventinfo/countByGirdMember').then((res) => {
|
||||
if (res.code == 0) {
|
||||
if(res.data.businessCountMap['受理率']) {
|
||||
res.data.businessCountMap['受理率'] = Number(res.data.businessCountMap['受理率'] * 100).toFixed(1)
|
||||
}
|
||||
if(res.data.businessCountMap['办结率']) {
|
||||
res.data.businessCountMap['办结率'] = Number(res.data.businessCountMap['办结率'] * 100).toFixed(1)
|
||||
}
|
||||
this.info = res.data
|
||||
|
||||
Object.keys(res.data.todayCountMap).forEach((key) => {
|
||||
var info = {
|
||||
label: key,
|
||||
value: res.data.todayCountMap[key]
|
||||
}
|
||||
this.todayList.push(info)
|
||||
})
|
||||
if(this.info.groupList.length) {
|
||||
this.info.groupList.map((item, index) => {
|
||||
if(item.finishNum) {
|
||||
item.percentage = (item.finishNum/item.totalNum).toFixed(2)
|
||||
}else {
|
||||
item.percentage = 0
|
||||
}
|
||||
item.width = 56-(index*10)
|
||||
})
|
||||
}
|
||||
}
|
||||
this.pageShow = true
|
||||
})
|
||||
},
|
||||
|
||||
goDetail(item) {
|
||||
uni.navigateTo({ url: `./Detail?id=${item.id}` })
|
||||
},
|
||||
|
||||
change(index) {
|
||||
this.currentTabs = index
|
||||
this.getList()
|
||||
},
|
||||
|
||||
toPercentageDetail() {
|
||||
uni.navigateTo({url: './PercentageDetail'})
|
||||
},
|
||||
toUserList() {
|
||||
uni.navigateTo({url: './UserList'})
|
||||
},
|
||||
|
||||
girdList() {
|
||||
this.$http.post(`/app/appgirdmemberinfo/queryMyGirdList`, null, {
|
||||
params: {
|
||||
size: 9999,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.myGirdList = res.data
|
||||
var all = {
|
||||
id: '',
|
||||
girdName: '全部'
|
||||
}
|
||||
this.myGirdList.unshift(all)
|
||||
}
|
||||
})
|
||||
},
|
||||
confirm(e) {
|
||||
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.statistics {
|
||||
background-color: #F3F7F8;
|
||||
padding: 30px 30px 0;
|
||||
.gird-select{
|
||||
width: 100%;
|
||||
background: #FFF;
|
||||
border-radius: 16px;
|
||||
margin: 0 0 24px;
|
||||
text-align: center;
|
||||
padding: 24px 0;
|
||||
img{
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
span{
|
||||
display: inline-block;
|
||||
font-size: 34px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
line-height: 48px;
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
.info-content{
|
||||
width: 100%;
|
||||
background: #FFF;
|
||||
border-radius: 16px;
|
||||
margin-bottom: 24px;
|
||||
.title{
|
||||
font-size: 32px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #333;
|
||||
line-height: 48px;
|
||||
padding: 24px 16px 24px 24px;
|
||||
img{
|
||||
float: right;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
.el-row{
|
||||
display: flex;
|
||||
padding: 32px 0 60px 0;
|
||||
.item{
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
h2{
|
||||
font-size: 64px;
|
||||
font-family: DINAlternate-Bold, DINAlternate;
|
||||
font-weight: bold;
|
||||
color: #3B424A;
|
||||
line-height: 64px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
p{
|
||||
font-size: 28px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #999;
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.business{
|
||||
display: flex;
|
||||
padding: 40px 0 30px 0;
|
||||
.left{
|
||||
width: 220px;
|
||||
padding: 20px 0 78px 50px;
|
||||
.item{
|
||||
margin-bottom: 58px;
|
||||
}
|
||||
h2{
|
||||
font-size: 58px;
|
||||
font-family: DINAlternate-Bold, DINAlternate;
|
||||
font-weight: bold;
|
||||
color: #3B424A;
|
||||
line-height: 64px;
|
||||
letter-spacing: -4px;
|
||||
}
|
||||
p{
|
||||
font-size: 28px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #666;
|
||||
line-height: 48px;
|
||||
}
|
||||
}
|
||||
.right{
|
||||
width: calc(100% - 220px);
|
||||
display: flex;
|
||||
.img{
|
||||
width: 140px;
|
||||
margin-top: 42px;
|
||||
img{
|
||||
width: 140px;
|
||||
height: 144px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
.num{
|
||||
width: calc(100% - 140px);
|
||||
text-align: center;
|
||||
.item{
|
||||
height: 130px;
|
||||
border-radius: 6px;
|
||||
background-size: 100% 100%;
|
||||
margin-bottom: 4px;
|
||||
color: #2F7EE5;
|
||||
h2{
|
||||
font-size: 26px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
line-height: 48px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
p{
|
||||
font-size: 40px;
|
||||
font-family: DINAlternate-Bold, DINAlternate;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.bg1{
|
||||
width: 272px;
|
||||
background-image: url('./components/img/bg-1.png');
|
||||
}
|
||||
.bg2{
|
||||
width: 234px;
|
||||
background-image: url('./components/img/bg-2.png');
|
||||
margin-left: 16px;
|
||||
}
|
||||
.bg3{
|
||||
width: 208px;
|
||||
background-image: url('./components/img/bg-3.png');
|
||||
margin-left: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.percentage{
|
||||
padding: 16px 0 0 26px;
|
||||
.item{
|
||||
width: 100%;
|
||||
padding-bottom: 32px;
|
||||
.mini-title{
|
||||
font-size: 30px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #333;
|
||||
line-height: 48px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.info{
|
||||
width: 100%;
|
||||
font-size: 28px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #999;
|
||||
line-height: 48px;
|
||||
.line-bg{
|
||||
display: inline-block;
|
||||
height: 14px;
|
||||
background: #D7D8D9;
|
||||
border-radius: 8px;
|
||||
margin-right: 12px;
|
||||
.active-bg{
|
||||
height: 100%;
|
||||
background: #257FF1;
|
||||
border-radius: 8px;
|
||||
min-width: 1%;
|
||||
}
|
||||
}
|
||||
img{
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.pad-b120{
|
||||
background-color: #F3F7F8;
|
||||
padding-bottom: 120px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
60
src/project/grid/AppHandSnapshot/UserList.vue
Normal file
60
src/project/grid/AppHandSnapshot/UserList.vue
Normal file
@@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<div class="UserList">
|
||||
<div class="item">
|
||||
<img src="./components/img/user-img.png" alt="">
|
||||
<div class="info">
|
||||
<h2>李毅</h2>
|
||||
<p>共受理23条 | 已办结17条</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'UserList',
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.UserList {
|
||||
height: 100%;
|
||||
.item{
|
||||
padding: 24px 0 0 32px;
|
||||
background-color: #fff;
|
||||
img{
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin-right: 32px;
|
||||
}
|
||||
.info{
|
||||
display: inline-block;
|
||||
width: calc(100% - 112px);
|
||||
padding-bottom: 24px;
|
||||
border-bottom: 1px solid #E4E5E6;
|
||||
h2{
|
||||
font-size: 32px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
line-height: 44px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
p{
|
||||
font-size: 28px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #666;
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
BIN
src/project/grid/AppHandSnapshot/components/1.png
Normal file
BIN
src/project/grid/AppHandSnapshot/components/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 623 B |
BIN
src/project/grid/AppHandSnapshot/components/22.png
Normal file
BIN
src/project/grid/AppHandSnapshot/components/22.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 810 B |
BIN
src/project/grid/AppHandSnapshot/components/img/add-icon.png
Normal file
BIN
src/project/grid/AppHandSnapshot/components/img/add-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 815 B |
BIN
src/project/grid/AppHandSnapshot/components/img/bg-1.png
Normal file
BIN
src/project/grid/AppHandSnapshot/components/img/bg-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
BIN
src/project/grid/AppHandSnapshot/components/img/bg-2.png
Normal file
BIN
src/project/grid/AppHandSnapshot/components/img/bg-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
BIN
src/project/grid/AppHandSnapshot/components/img/bg-3.png
Normal file
BIN
src/project/grid/AppHandSnapshot/components/img/bg-3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
BIN
src/project/grid/AppHandSnapshot/components/img/down-icon.png
Normal file
BIN
src/project/grid/AppHandSnapshot/components/img/down-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 314 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
src/project/grid/AppHandSnapshot/components/img/gird-icon.png
Normal file
BIN
src/project/grid/AppHandSnapshot/components/img/gird-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
src/project/grid/AppHandSnapshot/components/img/handle-icon.png
Normal file
BIN
src/project/grid/AppHandSnapshot/components/img/handle-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
src/project/grid/AppHandSnapshot/components/img/jujue.png
Normal file
BIN
src/project/grid/AppHandSnapshot/components/img/jujue.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
src/project/grid/AppHandSnapshot/components/img/line-img.png
Normal file
BIN
src/project/grid/AppHandSnapshot/components/img/line-img.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
src/project/grid/AppHandSnapshot/components/img/local-icon.png
Normal file
BIN
src/project/grid/AppHandSnapshot/components/img/local-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
src/project/grid/AppHandSnapshot/components/img/no-admin.png
Normal file
BIN
src/project/grid/AppHandSnapshot/components/img/no-admin.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
BIN
src/project/grid/AppHandSnapshot/components/img/remove-icon.png
Normal file
BIN
src/project/grid/AppHandSnapshot/components/img/remove-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 803 B |
BIN
src/project/grid/AppHandSnapshot/components/img/right-icon.png
Normal file
BIN
src/project/grid/AppHandSnapshot/components/img/right-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 373 B |
BIN
src/project/grid/AppHandSnapshot/components/img/search-icon.png
Normal file
BIN
src/project/grid/AppHandSnapshot/components/img/search-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 766 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
src/project/grid/AppHandSnapshot/components/img/set-icon.png
Normal file
BIN
src/project/grid/AppHandSnapshot/components/img/set-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
src/project/grid/AppHandSnapshot/components/img/setting-icon.png
Normal file
BIN
src/project/grid/AppHandSnapshot/components/img/setting-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
src/project/grid/AppHandSnapshot/components/img/tx@2x.png
Normal file
BIN
src/project/grid/AppHandSnapshot/components/img/tx@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
src/project/grid/AppHandSnapshot/components/img/user-img.png
Normal file
BIN
src/project/grid/AppHandSnapshot/components/img/user-img.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
BIN
src/project/grid/AppHandSnapshot/components/img/xz.png
Normal file
BIN
src/project/grid/AppHandSnapshot/components/img/xz.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
src/project/grid/AppHandSnapshot/components/img/xzh.png
Normal file
BIN
src/project/grid/AppHandSnapshot/components/img/xzh.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
src/project/grid/AppHandSnapshot/components/img/zhuanjiao.png
Normal file
BIN
src/project/grid/AppHandSnapshot/components/img/zhuanjiao.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
src/project/grid/AppHandSnapshot/components/yan.jpg
Normal file
BIN
src/project/grid/AppHandSnapshot/components/yan.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 88 KiB |
1018
src/project/grid/AppMonitoringObject/Add.vue
Normal file
1018
src/project/grid/AppMonitoringObject/Add.vue
Normal file
File diff suppressed because it is too large
Load Diff
378
src/project/grid/AppMonitoringObject/AppMonitoringObject.vue
Normal file
378
src/project/grid/AppMonitoringObject/AppMonitoringObject.vue
Normal file
@@ -0,0 +1,378 @@
|
||||
<template>
|
||||
<div class="AppMonitoringObject">
|
||||
<div v-if="isAdmin">
|
||||
<AiTopFixed>
|
||||
<!-- <div class="area">
|
||||
<i>可选范围</i>
|
||||
<span class="separat">/</span>
|
||||
<AiAreaPicker ref="area" class="aiArea" :value="areaId" :areaId="user.areaId" :name.sync="areaName" mode="custom"
|
||||
@select="seachObj">
|
||||
<span class="label" v-if="areaName">{{ areaName }}</span>
|
||||
<i v-else>请选择</i>
|
||||
</AiAreaPicker>
|
||||
</div>
|
||||
<div class="line"></div> -->
|
||||
<u-tabs :list="tabList" :is-scroll="false" :current="currentTabs" height="96" bar-width="150" @change="change"></u-tabs>
|
||||
<div class="seach-obj">
|
||||
<u-search v-model="keyword" :clearabled="true" placeholder="请输入姓名/身份证号" :show-action="false" bg-color="#F5F5F5"
|
||||
search-icon-color="#E2E8F1" color="#666" height="58" @search="handerSearch" @clear="handerClear">
|
||||
</u-search>
|
||||
</div>
|
||||
</AiTopFixed>
|
||||
<div class="list-data" v-if="list.length > 0">
|
||||
<div class="item" v-for="(item, iindex) in list" :key="iindex" @click="toDetail(item)">
|
||||
<div class="left">
|
||||
<img :src="item.photo" alt="" v-if="item.photo"/>
|
||||
<img src="./components/img/user-img.png" alt="" v-else/>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="right-top">
|
||||
<span class="name">{{ item.name }}</span>
|
||||
<span class="status" :class="`status${item.status}`">{{ $dict.getLabel('fpPrtpStatus', item.status) }}</span>
|
||||
</div>
|
||||
<div class="right-bottom">
|
||||
<p>{{ item.idNumber || '' }}</p>
|
||||
<p>{{ item.countyName + item.townName + item.villageName }}{{ item.currentAddress || '' }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<AiEmpty class="emptyWrap" v-else></AiEmpty>
|
||||
<AiFixedBtn v-if="checkType == 1">
|
||||
<div class="addBtn iconfont iconfont-iconfangda" @tap="toAdd" v-if="$permissions('app_apppreventionreturntopoverty_edit')"></div>
|
||||
</AiFixedBtn>
|
||||
</div>
|
||||
<div v-else class="empty">
|
||||
<img src="https://cdn.cunwuyun.cn/dvcp/h5/no-admin.png" alt="">
|
||||
<p>没有网格员权限<br/>无法查看监测信息哦~</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState} from "vuex";
|
||||
|
||||
export default {
|
||||
name: 'AppMonitoringObject',
|
||||
appName: '监测对象',
|
||||
data() {
|
||||
return {
|
||||
keyword: '',
|
||||
list: [],
|
||||
current: 1,
|
||||
total: 0,
|
||||
tabList: [
|
||||
{
|
||||
name: '已登记监测对象',
|
||||
},
|
||||
{
|
||||
name: '已消除风险对象',
|
||||
},
|
||||
],
|
||||
currentTabs: 0,
|
||||
areaId: '',
|
||||
areaName: '',
|
||||
isAdmin: false,
|
||||
checkType: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
},
|
||||
onShow() {
|
||||
document.title = '监测对象'
|
||||
this.areaId = this.user.areaId
|
||||
this.areaName = this.user.areaName
|
||||
this.$dict.load('fpPrtpStatus').then(() => {
|
||||
this.isGirdUser()
|
||||
})
|
||||
uni.$on('reload', () => {
|
||||
this.getListInit()
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
isGirdUser() {
|
||||
this.isAdmin = false
|
||||
this.$http.post('/app/appgirdmemberinfo/checkLogOnUser').then((res) => {
|
||||
if (res?.data) {
|
||||
if (res.data.checkType != '0') {
|
||||
this.isAdmin = true
|
||||
this.checkType = res.data.checkType
|
||||
this.getList()
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
getListInit() {
|
||||
this.current = 1
|
||||
this.list = []
|
||||
this.getList()
|
||||
},
|
||||
|
||||
getList() {
|
||||
if (this.list.length >= this.total && this.total > 0) return
|
||||
this.$http.post('/app/appgirdmemberpoverty/listByGirdMember', null, {
|
||||
params: {
|
||||
current: this.current,
|
||||
status: this.currentTabs,
|
||||
name: this.keyword,
|
||||
},
|
||||
}).then((res) => {
|
||||
if (res?.data) {
|
||||
res.data.records.map((item) => {
|
||||
if (item.idNumber) {
|
||||
item.idNumber = item.idNumber.replace(/^(\w{6})\w{8}(.*)$/, '$1********$2')
|
||||
}
|
||||
})
|
||||
this.list = this.current > 1 ? [...this.list, ...res.data.records] : res.data.records
|
||||
this.total = res.data.total
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
change(index) {
|
||||
this.currentTabs = index
|
||||
this.getListInit()
|
||||
},
|
||||
|
||||
toDetail(item) {
|
||||
uni.navigateTo({url: `./Detail?id=${item.id}`})
|
||||
},
|
||||
|
||||
seachObj(e) {
|
||||
this.areaId = e
|
||||
this.getListInit()
|
||||
},
|
||||
|
||||
handerSearch(e) {
|
||||
this.keyword = e
|
||||
this.getListInit()
|
||||
},
|
||||
|
||||
handerClear() {
|
||||
this.keyword = ''
|
||||
this.getListInit()
|
||||
},
|
||||
toAdd() {
|
||||
uni.navigateTo({url: './Add'})
|
||||
}
|
||||
},
|
||||
onReachBottom() {
|
||||
this.current++
|
||||
this.getList()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.AppMonitoringObject {
|
||||
height: 100%;
|
||||
|
||||
.area {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 0 32px;
|
||||
height: 112px;
|
||||
color: #333333;
|
||||
font-size: 30px;
|
||||
background: #fff;
|
||||
box-sizing: border-box;
|
||||
|
||||
.separat {
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
i {
|
||||
color: #3F8DF5;
|
||||
font-size: 30px;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #333333;
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.line {
|
||||
height: 16px;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.seach-obj {
|
||||
border-bottom: 2px solid #f5f5f5;
|
||||
border-top: 2px solid #f5f5f5;
|
||||
padding: 20px 32px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
::v-deep .u-form {
|
||||
width: 100%;
|
||||
|
||||
.areaIds {
|
||||
.u-form-item__body {
|
||||
.u-form-item--right {
|
||||
.u-form-item--right__content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.u-form-item--right__content__slot {
|
||||
.AiAreaPicker {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
.areaSelector {
|
||||
.location {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.u-form-item--right__content__icon {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-data {
|
||||
background: #fff;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
padding: 24px 0 0 32px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.left {
|
||||
img {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 32px;
|
||||
width: 100%;
|
||||
border-bottom: 2px solid #E4E5E6;
|
||||
padding-right: 32px;
|
||||
|
||||
.right-top {
|
||||
font-size: 36px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
line-height: 44px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 8px;
|
||||
|
||||
.status {
|
||||
font-size: 26px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
line-height: 36px;
|
||||
}
|
||||
|
||||
.status0 {
|
||||
color: #F82;
|
||||
}
|
||||
|
||||
.status1 {
|
||||
color: #3975C6;
|
||||
}
|
||||
|
||||
.status2, .status4 {
|
||||
color: #F46;
|
||||
}
|
||||
|
||||
.status3 {
|
||||
color: #2EA222;
|
||||
}
|
||||
}
|
||||
|
||||
.right-bottom {
|
||||
p {
|
||||
font-size: 26px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #999;
|
||||
line-height: 36px;
|
||||
word-break: break-all;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
p:nth-of-type(1) {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.emptyWrap {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
::v-deep .AiTopFixed .content {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
::v-deep .u-tab-bar {
|
||||
bottom: -6px !important;
|
||||
}
|
||||
|
||||
.addBtn {
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
flex-shrink: 0;
|
||||
background: $uni-color-primary;
|
||||
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
|
||||
font-size: 48px;
|
||||
color: #fff;
|
||||
border-radius: 50%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.empty {
|
||||
text-align: center;
|
||||
|
||||
img {
|
||||
width: 282px;
|
||||
height: 306px;
|
||||
margin: 136px auto 0;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 28px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #999;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.add-btn {
|
||||
width: 400px;
|
||||
height: 88px;
|
||||
line-height: 88px;
|
||||
text-align: center;
|
||||
border-radius: 8px;
|
||||
background-color: #3267f0;
|
||||
color: #fff;
|
||||
font-size: 30px;
|
||||
margin: 200px auto 0;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .u-search {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
709
src/project/grid/AppMonitoringObject/Detail.vue
Normal file
709
src/project/grid/AppMonitoringObject/Detail.vue
Normal file
@@ -0,0 +1,709 @@
|
||||
<template>
|
||||
<div class="detail" v-if="pageShow" :class="[isFrom ? 'active' : '']">
|
||||
<div class="tab" v-if="!isFrom">
|
||||
<span @click="changeTab(0)" :class="[currIndex === 0 ? 'active' : '']">基本信息</span>
|
||||
<span @click="changeTab(1)" :class="[currIndex === 1 ? 'active' : '']">走访日志</span>
|
||||
</div>
|
||||
<div class="tab-content">
|
||||
<div class="tab-content__item" v-show="currIndex === 0">
|
||||
<div class="item-wrapper">
|
||||
<div class="item-header item-avatar">
|
||||
<div class="left">
|
||||
<!-- <img :src="info.photo" alt="" v-if="info.photo" /> -->
|
||||
<img :src="$cdn + 'avatar.png'" />
|
||||
<div class="left-right">
|
||||
<h2>{{ info.name }}</h2>
|
||||
<p style="color: #2979ff;" @click="callPhone(info.phone)"><u-icon name="phone" color="#2979ff" size="28"></u-icon>{{ info.phone }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<span @click="linkTo(`./residentDetail?id=${info.id}`)">详情</span>
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<label>现住地址</label>
|
||||
<span>{{ info.countyName + info.townName + info.villageName }}</span>
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<label>详细地址</label>
|
||||
<span>{{ info.currentAddress }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-wrapper">
|
||||
<div class="item-header">
|
||||
<div class="left">
|
||||
<h2>帮扶措施</h2>
|
||||
</div>
|
||||
<span @click="toLogList()" v-if="$permissions('app_apppreventionreturntopovertylog_detail')">查看</span>
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<label>采取措施</label>
|
||||
<span>{{ info.helpLog? $dict.getLabel('fpAssistanceMeasures',info.helpLog.operationDesc): '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-wrapper">
|
||||
<div class="item-header">
|
||||
<div class="left">
|
||||
<h2>家庭成员</h2>
|
||||
<i :style="{color: info.family && info.family.length ? '#2EA222' : '#FF4466'}">({{
|
||||
info.family && info.family.length ? '已填写' : '未填写'
|
||||
}})</i>
|
||||
</div>
|
||||
<span @click="toFamily()">编辑</span>
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<label>未参加医疗参保</label>
|
||||
<span>{{ basicNum.length }}人</span>
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<label>未参加养老保险</label>
|
||||
<span>{{ endNum.length }}人</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-wrapper">
|
||||
<div class="item-header">
|
||||
<div class="left">
|
||||
<h2>生产生活条件</h2>
|
||||
<i :style="{color: isFamilySituation ? '#2EA222' : '#FF4466'}">({{
|
||||
isFamilySituation ? '已填写' : '未填写'
|
||||
}})</i>
|
||||
</div>
|
||||
<span @click="linkTo(`./MonitorFamilySituation?id=${info.id}&girdId=${girdInfo.girdId}&girdName=${girdInfo.girdName}`)">编辑</span>
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<label>是否危房</label>
|
||||
<span>{{ $dict.getLabel('fpYesOrNo', info.dilapidatedHousehold) || '-' }}</span>
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<label>是否解决安全饮水</label>
|
||||
<span>{{ $dict.getLabel('fpYesOrNo', info.drinkingWaterSafety) || '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-wrapper">
|
||||
<div class="item-header">
|
||||
<div class="left">
|
||||
<h2>家庭风险情况</h2>
|
||||
<i :style="{color: isFamilyRisk ? '#2EA222' : '#FF4466'}">({{ isFamilyRisk ? '已填写' : '未填写' }})</i>
|
||||
</div>
|
||||
<span @click="linkTo(`./familyRisk?id=${info.id}&girdId=${girdInfo.girdId}&girdName=${girdInfo.girdName}`)">编辑</span>
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<label>监测对象类型</label>
|
||||
<span>{{ $dict.getLabel('fpType', info.objectType) }}</span>
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<label>风险因素</label>
|
||||
<span>{{ $dict.getLabel('fpRiskType', info.riskType) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-wrapper">
|
||||
<div class="item-header">
|
||||
<div class="left">
|
||||
<h2>家庭收支情况</h2>
|
||||
<i :style="{color: familyIncome ? '#2EA222' : '#FF4466'}">({{ familyIncome ? '已填写' : '未填写' }})</i>
|
||||
</div>
|
||||
<span @click="linkTo(`./MonitorIncome?id=${info.id}&girdId=${girdInfo.girdId}&girdName=${girdInfo.girdName}`)">编辑</span>
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<label>家庭纯收入</label>
|
||||
<span>{{ info.familyIncome }}元</span>
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<label>家庭人均纯收入</label>
|
||||
<span>{{ info.perCapitaIncome }}元</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 风险解除 -->
|
||||
<!-- v-if="info.status == 3" -->
|
||||
<div class="item-wrapper" v-if="info.status == 3">
|
||||
<div class="item-header">
|
||||
<div class="left">
|
||||
<h2>风险解除跟踪</h2>
|
||||
<i :style="{color: moveRisk ? '#2EA222' : '#FF4466'}">({{ moveRisk ? '已填写' : '未填写' }})</i>
|
||||
</div>
|
||||
<span @click="linkTo(`./MonitorPoorStatus?id=${info.id}&girdId=${girdInfo.girdId}&girdName=${girdInfo.girdName}`)">编辑</span>
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<label>信息采集人</label>
|
||||
<span>{{ info.updateUserName || '-' }}</span>
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<label>信息采集人电话</label>
|
||||
<span>{{ info.updateUserPhone || '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-content__item" v-show="currIndex === 1">
|
||||
<div class="log-item" v-for="(item, index) in list" :key="index">
|
||||
<div class="log-item__wrapper">
|
||||
<div class="log-item__user">
|
||||
<div class="left">
|
||||
<div class="user">
|
||||
<span>{{ item.createUserName.substr(item.createUserName.length - 2) }}</span>
|
||||
</div>
|
||||
<h2>{{ item.createUserName }}</h2>
|
||||
</div>
|
||||
<div class="right">
|
||||
<span>{{ item.createTime }}</span>
|
||||
<u-icon name="list" color="#999" size="28" @click="edit(item.id)" style="margin-left:16px;" v-if="item.createUserId == user.id && item.operationDesc == '走访排查'"></u-icon>
|
||||
</div>
|
||||
</div>
|
||||
<p style="color: #999999;">操作类型：{{ item.operationDesc }}</p>
|
||||
<p>{{ item.detail }}</p>
|
||||
<div class="imgs" v-if="item.files && item.files.length">
|
||||
<image :src="img.url" @click="prevImg(item.files, img.url)" v-for="(img, index) in item.files"
|
||||
:key="index"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<AiEmpty v-if="!list.length" style="padding-bottom: 20px;"></AiEmpty>
|
||||
</div>
|
||||
</div>
|
||||
<AiFixedBtn v-if="currIndex === 1">
|
||||
<div class="addBtn iconfont iconfont-iconfangda" @tap="toAddLog()"></div>
|
||||
</AiFixedBtn>
|
||||
<!-- 0：待纳入、1：监测中、2：待解除、3：已解除、4：已驳回 -->
|
||||
<div v-if="checkType == 1 && currIndex != 1">
|
||||
<div class="footer-btn" v-if="info.status == 1">
|
||||
<div class="confirm-btn" @click="toAddView('您确认要申请解除此监测对象的风险吗？', '')">申请解除风险</div>
|
||||
</div>
|
||||
<div class="footer-btn" v-if="info.status == 3 || info.status == 4">
|
||||
<div @click="del" v-if="$permissions('app_apppreventionreturntopoverty_del')">删除人员</div>
|
||||
<div class="confirm-btn" @click="toAddView('您确认要申请纳入此监测对象吗？', '')">申请纳入监测</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="checkType == 2 && currIndex != 1">
|
||||
|
||||
<div class="footer-btn" v-if="info.status == 0 && userInfo != ''">
|
||||
<div class="confirm-btn" @click="toRemove('您确认要将此居民纳入监测对象吗？', 1,0)">纳入监测审核</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-btn" v-if="info.status == 1">
|
||||
<div class="confirm-btn" @click="toAddView('您确认要解除此监测对象的风险吗？', 1)">消除风险</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-btn" v-if="info.status == 2">
|
||||
<div class="confirm-btn" @click="toRemove('您确认要解除此监测对象的风险吗？', 1,1)">消除风险审核</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-btn" v-if="(info.status == 4 || info.status == 3) && userInfo != ''">
|
||||
<div @click="del" v-if="$permissions('app_apppreventionreturntopoverty_del')">删除人员</div>
|
||||
<div class="confirm-btn" @click="toAddView('您确认要将此居民纳入监测对象吗？', 1)">纳入监测</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
export default {
|
||||
name: 'detail',
|
||||
|
||||
data() {
|
||||
return {
|
||||
info: {},
|
||||
pageShow: false,
|
||||
currIndex: 0,
|
||||
list: [],
|
||||
isFrom: false,
|
||||
viewAll: false,
|
||||
checkType: '',
|
||||
girdInfo: {},
|
||||
userInfo: {},
|
||||
id: '',
|
||||
basicNum: [],
|
||||
endNum: [],
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
isIncome() {
|
||||
if (!this.info.id) {
|
||||
return false
|
||||
}
|
||||
return this.info.income8 > 0 || this.info.income8 > 0;
|
||||
},
|
||||
|
||||
isPoorStatus() {
|
||||
if (!this.info.id) {
|
||||
return false
|
||||
}
|
||||
return (this.info.industrialAssistance || this.info.healthAssistance || this.info.employmentAssistance || this.info.educationalAssistance
|
||||
|| this.info.financialAssistance || this.info.socialAssistance || this.info.publicWelfarePostAssistance);
|
||||
},
|
||||
|
||||
isFamilySituation() {
|
||||
if (!this.info.id) {
|
||||
return false
|
||||
}
|
||||
return (this.info.drinkingWaterSafety || this.info.dilapidatedHouse && this.info.move);
|
||||
},
|
||||
isFamilyRisk() {
|
||||
if (!this.info.id) {
|
||||
return false
|
||||
}
|
||||
return (this.info.objectType || this.info.riskType || this.info.militaryMartyrs || this.info.dropOutOfSchool)
|
||||
},
|
||||
|
||||
familyIncome() {
|
||||
if (!this.info.id) {
|
||||
return false
|
||||
}
|
||||
return (this.info.income1 || this.info.income2 || this.info.income3 || this.info.income4
|
||||
|| this.info.income5|| this.info.income6|| this.info.income7|| this.info.income8 || this.info.income9 ||
|
||||
this.info.income10 || this.info.income11 || this.info.income12 ||
|
||||
this.info.income13 || this.info.income14 || this.info.income15)
|
||||
},
|
||||
|
||||
moveRisk() {
|
||||
if (!this.info.id) {
|
||||
return false
|
||||
}
|
||||
return (this.info.fxxcIncome1 || this.info.fxxcIncome2 || this.info.fxxcIncome3 || this.info.fxxcIncome4
|
||||
|| this.info.fxxcIncome5 || this.info.fxxcIncome6 || this.info.fxxcIncome7)
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
onLoad(query) {
|
||||
if (query.isFrom) {
|
||||
this.isFrom = true
|
||||
}
|
||||
this.$dict.load(['fpType', 'riskEliminationMethod', 'fpRiskType', 'fpYesOrNo', 'fpNation', 'fpEducation', 'fpStudentsInSchool', 'fpHealth',
|
||||
'fpLaborSkills', 'fpPoliticalOutlook', 'fpIndustrialAssistance', 'fpHealthAssistance','fpAssistanceMeasures']).then(() => {
|
||||
this.isGirdUser()
|
||||
this.getInfo()
|
||||
})
|
||||
|
||||
this.id = query.id
|
||||
this.getUserPopup()
|
||||
},
|
||||
onShow() {
|
||||
document.title = '监测对象详情'
|
||||
uni.$on('reload', () => {
|
||||
this.getInfo()
|
||||
})
|
||||
},
|
||||
|
||||
methods: {
|
||||
isGirdUser() {
|
||||
this.$http.post('/app/appgirdmemberinfo/checkLogOnUser').then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.checkType = res.data.checkType
|
||||
this.girdInfo = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
callPhone(phone) {
|
||||
uni.makePhoneCall({phoneNumber: phone})
|
||||
},
|
||||
|
||||
linkTo(url) {
|
||||
uni.navigateTo({url})
|
||||
},
|
||||
|
||||
call(phone) {
|
||||
if (phone) {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: phone
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
edit(id) {
|
||||
uni.showActionSheet({
|
||||
itemList: ['编辑', '删除'],
|
||||
success: res => {
|
||||
if (res.tapIndex === 0) {
|
||||
uni.navigateTo({
|
||||
url: `./MonitorAddLog?pid=${this.info.id}&id=${id}&type=0`
|
||||
})
|
||||
} else if (res.tapIndex === 1) {
|
||||
this.$confirm('确定删除该数据？').then(() => {
|
||||
uni.showLoading()
|
||||
this.$http.post(`/app/apppreventionreturntopovertylog/delete?ids=${id}`).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.$u.toast('删除成功')
|
||||
this.getInfo()
|
||||
}
|
||||
uni.hideLoading()
|
||||
})
|
||||
}).catch(() => {
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
prevImg(urls, img) {
|
||||
const imgs = urls.map(v => v.url)
|
||||
uni.previewImage({
|
||||
urls: imgs,
|
||||
current: img
|
||||
})
|
||||
},
|
||||
|
||||
toAddLog() {
|
||||
uni.navigateTo({
|
||||
url: `./MonitorAddLog?pid=${this.info.id}&type=0`
|
||||
})
|
||||
},
|
||||
|
||||
toLogList() {
|
||||
uni.navigateTo({
|
||||
url: `./LogList?id=${this.info.id}`
|
||||
})
|
||||
},
|
||||
|
||||
changeTab(index) {
|
||||
this.currIndex = index
|
||||
},
|
||||
|
||||
getUserPopup() {
|
||||
this.$http.post(`/app/apppreventionreturntopoverty/popup?id=${this.id}`).then(res => {
|
||||
if (res?.code === 0) {
|
||||
this.userInfo = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
getInfo() {
|
||||
this.$http.post(`/app/apppreventionreturntopoverty/queryDetailById?id=${this.id}`).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.info = res.data
|
||||
|
||||
let ylbxCount = 0
|
||||
let ylCount = 0
|
||||
if(res.data.family && res.data.family.length) {
|
||||
res.data.family.forEach(item => {
|
||||
if (item.basicMedicalTreatment === '02') {
|
||||
ylbxCount = ylbxCount + 1
|
||||
}
|
||||
if (item.endowmentInsurance === '02') {
|
||||
ylCount = ylCount + 1
|
||||
}
|
||||
})
|
||||
this.endNum = res.data.family.filter(item =>
|
||||
(item.jcbxCxyiliao == '02' || '') && (item.jcbxCzyiliao == '02' || '')
|
||||
)
|
||||
this.endNum = res.data.family.filter(v=>
|
||||
(v.jcbxCxyanglao == '02' || '') && (v.jcbxCzyanglao == '02' || '')
|
||||
)
|
||||
}
|
||||
|
||||
this.info.ylbxCount = ylbxCount
|
||||
this.info.ylCount = ylCount
|
||||
this.pageShow = true
|
||||
}
|
||||
})
|
||||
this.$http.post(`/app/apppreventionreturntopovertylog/list?pid=${this.id}&size=1000¤t=1&type=0`).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.list = res.data.records || []
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
toAddView(text, pass) {
|
||||
this.$confirm('', text).then(() => {
|
||||
uni.navigateTo({url: `./MonitorAddView?pass=${pass}&id=${this.info.id}&status=${this.info.status}`})
|
||||
})
|
||||
},
|
||||
|
||||
del() {
|
||||
this.$confirm('', '您确认要要删除此监测对象的信息吗？').then(() => {
|
||||
this.$http.post(`/app/apppreventionreturntopoverty/delete?ids=${this.id}`).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.$u.toast('删除成功')
|
||||
uni.$emit('reload')
|
||||
setTimeout(() => {
|
||||
uni.navigateBack()
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
toRemove(text, pass,type) {
|
||||
this.$confirm('', text).then(() => {
|
||||
uni.navigateTo({url: `./MonitorRemoveView?pass=${pass}&id=${this.info.id}&status=${this.info.status}&type=${type}`})
|
||||
})
|
||||
},
|
||||
|
||||
toFamily() {
|
||||
var objectType = this.info.objectType || ''
|
||||
this.linkTo(`./MonitorFamilyMember?id=${this.info.id}&houseIdNumber=${this.info.idNumber}&objectType=${objectType}`)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.detail {
|
||||
padding-top: 96px;
|
||||
padding-bottom: 130px;
|
||||
|
||||
&.active {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.addBtn {
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
flex-shrink: 0;
|
||||
background: $uni-color-primary;
|
||||
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
|
||||
font-size: 48px;
|
||||
color: #fff;
|
||||
border-radius: 50%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.tab {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
align-items: center;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 96px;
|
||||
padding: 0 60px;
|
||||
background: #FFFFFF;
|
||||
border-bottom: 1px solid #D4D4D4;
|
||||
box-sizing: border-box;
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
span {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
height: 96px;
|
||||
line-height: 96px;
|
||||
color: #000000;
|
||||
text-align: center;
|
||||
font-size: 32px;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
width: 192px;
|
||||
height: 6px;
|
||||
background: transparent;
|
||||
transform: translateX(-50%);
|
||||
content: ' ';
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: #1365DD;
|
||||
|
||||
&::after {
|
||||
background: #1365DD;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-wrapper {
|
||||
background: #fff;
|
||||
margin-bottom: 16px;
|
||||
padding: 0 32px 16px;
|
||||
|
||||
.item-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 96px;
|
||||
|
||||
& > span {
|
||||
color: #3975C6;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
h2 {
|
||||
color: #333333;
|
||||
font-size: 32px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
i {
|
||||
font-style: normal;
|
||||
color: #2EA222;
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 14px 0;
|
||||
|
||||
label {
|
||||
color: #999999;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
span {
|
||||
max-width: 496px;
|
||||
text-align: right;
|
||||
color: #333333;
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.item-avatar {
|
||||
height: 192px;
|
||||
|
||||
img {
|
||||
width: 112px;
|
||||
height: 112px;
|
||||
margin-right: 24px;
|
||||
}
|
||||
|
||||
.left-right {
|
||||
p {
|
||||
margin-top: 8px;
|
||||
color: #999999;
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.log-item {
|
||||
padding: 0 0 0 32px;
|
||||
background: #fff;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.log-item__wrapper {
|
||||
border: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.log-item__wrapper {
|
||||
padding: 32px 32px 32px 0;
|
||||
border-bottom: 1px solid #E4E5E6;
|
||||
|
||||
.log-item__user {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
& > div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.left {
|
||||
.user, image {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
margin-right: 16px;
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
background: #2266FF;
|
||||
|
||||
span {
|
||||
color: #fff;
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #333;
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
image {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
span {
|
||||
margin-right: 6px;
|
||||
color: #999999;
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 4px 0 16px 96px;
|
||||
color: #343D65;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.imgs {
|
||||
margin-left: 96px;
|
||||
|
||||
image {
|
||||
width: 136px;
|
||||
height: 136px;
|
||||
margin-right: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.view-all{
|
||||
text-align: center;
|
||||
font-size: 32px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #3975C6;
|
||||
line-height: 44px;
|
||||
img{
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-left: 8px;
|
||||
transform: rotate(180deg);
|
||||
transition: all 0.3s ease-in-out;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.img-active{
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
.footer-btn{
|
||||
width: 100%;
|
||||
height: 112px;
|
||||
line-height: 112px;
|
||||
background: #FFF;
|
||||
display: flex;
|
||||
box-shadow: inset 0px 1px 0px 0px #DDDDDD;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
div{
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 32px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #333;
|
||||
}
|
||||
.confirm-btn{
|
||||
background-color: #3192F4;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
380
src/project/grid/AppMonitoringObject/LogList.vue
Normal file
380
src/project/grid/AppMonitoringObject/LogList.vue
Normal file
@@ -0,0 +1,380 @@
|
||||
<template>
|
||||
<div class="detail">
|
||||
<div class="tab-content">
|
||||
<div class="tab-content__item">
|
||||
<div class="log-item" v-for="(item, index) in list" :key="index">
|
||||
<div class="log-item__wrapper">
|
||||
<div class="log-item__user">
|
||||
<div class="left">
|
||||
<div class="user">
|
||||
<span>{{ item.createUserName.substr(item.createUserName.length - 2) }}</span>
|
||||
</div>
|
||||
<h2>{{ item.createUserName }}</h2>
|
||||
</div>
|
||||
<div class="right">
|
||||
<span>{{ item.createTime }}</span>
|
||||
<u-icon name="list" color="#999" size="28" @click="edit(item.id)" style="margin-left:16px;" v-if="item.createUserId == user.id"></u-icon>
|
||||
</div>
|
||||
</div>
|
||||
<p style="color: #999999;">帮扶措施：{{ $dict.getLabel('fpAssistanceMeasures',item.operationDesc) }}</p>
|
||||
<p>{{ item.detail }}</p>
|
||||
<div class="imgs" v-if="item.files && item.files.length">
|
||||
<image :src="img.url" @click="prevImg(item.files, img.url)" v-for="(img, index) in item.files"
|
||||
:key="index"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<AiEmpty v-if="!list.length" style="padding-bottom: 20px;"></AiEmpty>
|
||||
</div>
|
||||
</div>
|
||||
<AiFixedBtn>
|
||||
<div class="addBtn iconfont iconfont-iconfangda" @tap="toAddLog(0)" v-if="$permissions('app_apppreventionreturntopovertylog_edit')"></div>
|
||||
</AiFixedBtn>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState} from 'vuex'
|
||||
export default {
|
||||
name: 'detail',
|
||||
|
||||
data() {
|
||||
return {
|
||||
id: '',
|
||||
list: [],
|
||||
}
|
||||
},
|
||||
|
||||
onLoad(query) {
|
||||
this.$dict.load('fpAssistanceMeasures')
|
||||
this.id = query.id
|
||||
this.getList()
|
||||
uni.$on('reload', () => {
|
||||
this.getList()
|
||||
})
|
||||
},
|
||||
onShow() {
|
||||
document.title = '帮扶措施'
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
},
|
||||
|
||||
methods: {
|
||||
prevImg(urls, img) {
|
||||
const imgs = urls.map(v => v.url)
|
||||
uni.previewImage({
|
||||
urls: imgs,
|
||||
current: img
|
||||
})
|
||||
},
|
||||
|
||||
toAddLog() {
|
||||
uni.navigateTo({
|
||||
url: `./MonitorAddLog?pid=${this.id}&type=1`
|
||||
})
|
||||
},
|
||||
|
||||
getList() {
|
||||
this.$http.post(`/app/apppreventionreturntopovertylog/list?pid=${this.id}&size=1000¤t=1&type=1`).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.list = res.data.records || []
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
edit(id) {
|
||||
uni.showActionSheet({
|
||||
itemList: ['编辑', '删除'],
|
||||
success: res => {
|
||||
if (res.tapIndex === 0) {
|
||||
uni.navigateTo({
|
||||
url: `./MonitorAddLog?pid=${this.id}&id=${id}&type=1`
|
||||
})
|
||||
} else if (res.tapIndex === 1) {
|
||||
this.$confirm('确定删除该数据？').then(() => {
|
||||
uni.showLoading()
|
||||
this.$http.post(`/app/apppreventionreturntopovertylog/delete?ids=${id}`).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.$u.toast('删除成功')
|
||||
this.getList()
|
||||
}
|
||||
uni.hideLoading()
|
||||
})
|
||||
}).catch(() => {
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.detail {
|
||||
// padding-top: 16px;
|
||||
|
||||
&.active {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.addBtn {
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
flex-shrink: 0;
|
||||
background: $uni-color-primary;
|
||||
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
|
||||
font-size: 48px;
|
||||
color: #fff;
|
||||
border-radius: 50%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.tab {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
align-items: center;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 96px;
|
||||
padding: 0 60px;
|
||||
background: #FFFFFF;
|
||||
border-bottom: 1px solid #D4D4D4;
|
||||
box-sizing: border-box;
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
span {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
height: 96px;
|
||||
line-height: 96px;
|
||||
color: #000000;
|
||||
text-align: center;
|
||||
font-size: 32px;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
width: 192px;
|
||||
height: 6px;
|
||||
background: transparent;
|
||||
transform: translateX(-50%);
|
||||
content: ' ';
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: #1365DD;
|
||||
|
||||
&::after {
|
||||
background: #1365DD;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-wrapper {
|
||||
background: #fff;
|
||||
margin-bottom: 16px;
|
||||
padding: 0 32px 16px;
|
||||
|
||||
.item-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 96px;
|
||||
|
||||
& > span {
|
||||
color: #3975C6;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
h2 {
|
||||
color: #333333;
|
||||
font-size: 32px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
i {
|
||||
font-style: normal;
|
||||
color: #2EA222;
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 14px 0;
|
||||
|
||||
label {
|
||||
color: #999999;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
span {
|
||||
max-width: 496px;
|
||||
text-align: right;
|
||||
color: #333333;
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.item-avatar {
|
||||
height: 192px;
|
||||
|
||||
img {
|
||||
width: 112px;
|
||||
height: 112px;
|
||||
margin-right: 24px;
|
||||
}
|
||||
|
||||
.left-right {
|
||||
p {
|
||||
margin-top: 8px;
|
||||
color: #999999;
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.log-item {
|
||||
padding: 0 0 0 32px;
|
||||
background: #fff;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.log-item__wrapper {
|
||||
border: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.log-item__wrapper {
|
||||
padding: 32px 32px 32px 0;
|
||||
border-bottom: 1px solid #E4E5E6;
|
||||
|
||||
.log-item__user {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
& > div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.left {
|
||||
.user, image {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
margin-right: 16px;
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
background: #2266FF;
|
||||
|
||||
span {
|
||||
color: #fff;
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #333;
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
image {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
span {
|
||||
margin-right: 6px;
|
||||
color: #999999;
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 4px 0 16px 96px;
|
||||
color: #343D65;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.imgs {
|
||||
margin-left: 96px;
|
||||
|
||||
image {
|
||||
width: 136px;
|
||||
height: 136px;
|
||||
margin-right: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.view-all{
|
||||
text-align: center;
|
||||
font-size: 32px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #3975C6;
|
||||
line-height: 44px;
|
||||
img{
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-left: 8px;
|
||||
transform: rotate(180deg);
|
||||
transition: all 0.3s ease-in-out;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.img-active{
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
.footer-btn{
|
||||
width: 100%;
|
||||
height: 112px;
|
||||
line-height: 112px;
|
||||
background: #FFF;
|
||||
display: flex;
|
||||
box-shadow: inset 0px 1px 0px 0px #DDDDDD;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
div{
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 32px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #333;
|
||||
}
|
||||
.confirm-btn{
|
||||
background-color: #3192F4;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
877
src/project/grid/AppMonitoringObject/MonitorAddFamilyMember.vue
Normal file
877
src/project/grid/AppMonitoringObject/MonitorAddFamilyMember.vue
Normal file
@@ -0,0 +1,877 @@
|
||||
<template>
|
||||
<div class="add">
|
||||
<div class="form">
|
||||
<div class="form-group">
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i style="width: 8px;">*</i>
|
||||
<span>与户主关系</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<AiSelect dict="fpRelationship" v-model="form.householdRelation"></AiSelect>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i style="width: 8px;"></i>
|
||||
<span>选择人员</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<AiPagePicker class="select" :selected.sync="userList" single>
|
||||
<AiMore v-model="form.name"/>
|
||||
</AiPagePicker>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i>*</i>
|
||||
<span>成员姓名</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<input placeholder="请输入" type="text" v-model="form.name" :maxlength="8"
|
||||
placeholder-style="color: #999; font-size: 30rpx;"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="form-item" v-if="!id">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i>*</i>
|
||||
<span>户主姓名</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<input placeholder="请输入" type="text" v-model="form.name" :maxlength="8"
|
||||
placeholder-style="color: #999; font-size: 30rpx;" :disabled="isEdit" />
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i>*</i>
|
||||
<span>证件号码</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<input placeholder="请输入" type="idcard" v-model="form.idNumber" :maxlength="20"
|
||||
placeholder-style="color: #999; font-size: 30rpx;" @input="changeIdNumber" :disabled="userList.length? true : false"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i>*</i>
|
||||
<span>性别</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<span :style="form.sex === '' ? 'color:#999;' : 'color:#333;' ">{{ $dict.getLabel('sex', form.sex) || '自动识别' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i>*</i>
|
||||
<span>联系方式</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<input placeholder="请输入" type="number" v-model="form.phone" :maxlength="11"
|
||||
placeholder-style="color: #999; font-size: 30rpx;"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i>*</i>
|
||||
<span>现住址</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<AiAreaPicker :fullName.sync="form.currentAreaName" v-model="form.currentAreaId">
|
||||
<AiMore v-model="form.currentAreaName"/>
|
||||
</AiAreaPicker>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i style="opacity: 0;">*</i>
|
||||
<span>详细地址</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<input placeholder="请输入" v-model="form.currentAddress" placeholder-style="color: #999; font-size: 30rpx;"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i style="opacity: 0;">*</i>
|
||||
<span>民族</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<AiSelect dict="fpNation" v-model="form.nation"></AiSelect>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i style="opacity: 0;">*</i>
|
||||
<span>政治面貌</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<AiSelect dict="fpPoliticalOutlook" v-model="form.politicsStatus"></AiSelect>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i style="width: 8px;"></i>
|
||||
<span>文化程度</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<AiSelect dict="fpEducation" v-model="form.education"></AiSelect>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper border-b0">
|
||||
<div class="left">
|
||||
<i style="opacity: 0;">*</i>
|
||||
<span>个人照片</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="upload">
|
||||
<AiUploader :def.sync="photo" multiple placeholder="上传图片" :limit="1" action="/admin/file/add2" :disabled="id != ''"></AiUploader>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i style="width: 8px;"></i>
|
||||
<span>在校生状况</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<AiSelect dict="fpStudentsInSchool" v-model="form.schoolStatus"></AiSelect>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 个人健康状况 -->
|
||||
<div class="form-group">
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrappers">
|
||||
<div class="top">
|
||||
<i style="opacity: 0;">*</i>
|
||||
<span>个人健康状况(可多选)</span>
|
||||
</div>
|
||||
<div class="bottoms">
|
||||
<div class="cards" v-for="(e, index) in helthList" :key="index">
|
||||
<div :style="{color:e.checked == true ? '#1174FE' : '#333'}" @click="userClick(e, index)">{{ e.dictName }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 残疾类别 -->
|
||||
<div class="form-group">
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i style="width: 8px;"></i>
|
||||
<span>残疾类别</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<AiSelect dict="fpDisabilityType" v-model="form.disabilityType"></AiSelect>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i style="opacity: 0;">*</i>
|
||||
<span>残疾证办理年度</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<AiSelect dict="fpYear" v-model="form.disabilityCertificateYear"></AiSelect>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 基础保险 -->
|
||||
<div class="form-group">
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrappers">
|
||||
<div class="top">
|
||||
<i style="opacity: 0;">*</i>
|
||||
<span>基础保险(可多选)</span>
|
||||
</div>
|
||||
<div class="bottoms">
|
||||
<div class="cards" v-for="(e, index) in basicsCheckList" :key="index">
|
||||
<div :style="{color:e.checked == true ? '#1174FE' : '#333'}" @click="basicsCheck(e, index)">{{ e.dictName }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 保障措施 -->
|
||||
<div class="form-group">
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrappers">
|
||||
<div class="top">
|
||||
<i style="opacity: 0;">*</i>
|
||||
<span>保障措施(可多选)</span>
|
||||
</div>
|
||||
<div class="bottoms">
|
||||
<div class="cards" v-for="(e, index) in guaranteeCheckList" :key="index">
|
||||
<div :style="{color:e.checked == true ? '#1174FE' : '#333'}" @click="guaranteeCheck(e, index)">{{ e.dictName }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 劳动技能 -->
|
||||
<div class="form-group">
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i style="opacity: 0;">*</i>
|
||||
<span>劳动技能</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<AiSelect dict="fpLaborSkills" v-model="form.labourStatus"></AiSelect>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i style="opacity: 0;">*</i>
|
||||
<span>是否会讲普通话</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="check-item" :class="form.mandarin == '01' ? 'check-active' : '' " @click="form.mandarin='01'">是<img
|
||||
src="./components/img/check-icon.png" alt=""></div>
|
||||
<div class="check-item" :class="form.mandarin == '02' ? 'check-active' : '' " @click="form.mandarin='02'">否<img
|
||||
src="./components/img/check-icon.png" alt=""></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 就业渠道 -->
|
||||
<div class="form-group">
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i style="opacity: 0;">*</i>
|
||||
<span>就业渠道</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<AiSelect dict="fpEmploymentChannels" v-model="form.employmentChannels"></AiSelect>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i style="opacity: 0;">*</i>
|
||||
<span>务工企业名称</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<input placeholder="请输入" type="text" v-model="form.migrantEnterprises" placeholder-style="color: #999; font-size: 30rpx;"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i style="opacity: 0;">*</i>
|
||||
<span>务工时间/月</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<input placeholder="请输入" v-model="form.workeMonths" type="number" placeholder-style="color: #999; font-size: 30rpx;" maxlength="9"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i style="opacity: 0;">*</i>
|
||||
<span>公益性岗位</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<input placeholder="请输入" v-model="form.publicWelfarePosts" type="text" placeholder-style="color: #999; font-size: 30rpx;" maxlength="20"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i style="opacity: 0;">*</i>
|
||||
<span>公益性岗位（月数）</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<input placeholder="请输入" v-model="form.publicWelfarePostsMonths" type="number" placeholder-style="color: #999; font-size: 30rpx;" maxlength="9"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 是否国外务工 -->
|
||||
<div class="form-group">
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i style="opacity: 0;">*</i>
|
||||
<span>是否国外务工</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="check-item" :class="form.foreignWorkers == '01' ? 'check-active' : '' " @click="form.foreignWorkers='01'">是<img
|
||||
src="./components/img/check-icon.png" alt=""></div>
|
||||
<div class="check-item" :class="form.foreignWorkers == '02' ? 'check-active' : '' " @click="form.foreignWorkers='02'">否<img
|
||||
src="./components/img/check-icon.png" alt=""></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i style="opacity: 0;">*</i>
|
||||
<span>务工所在地</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<input placeholder="请输入" type="text" v-model="form.foreignWorkersAddress" placeholder-style="color: #999; font-size: 30rpx;"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn" hover-class="text" @click="submit">保存</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState} from 'vuex'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
name: '',
|
||||
objectType: '',
|
||||
idNumber: '',
|
||||
sex: '',
|
||||
phone: '',
|
||||
currentAreaId: '',
|
||||
currentAreaName: '',
|
||||
nation: '',
|
||||
politicsStatus: '',
|
||||
education: '',
|
||||
currentAddress: '',
|
||||
files: [],
|
||||
schoolStatus: '',
|
||||
labourStatus: '',
|
||||
workArea: '',
|
||||
workeMonths: '',
|
||||
basicMedicalTreatment: '',
|
||||
seriousIllnessInsurance: '',
|
||||
endowmentInsurance: '',
|
||||
subsistenceAllowance: '',
|
||||
specialPovertySupport: '',
|
||||
girdId: '',
|
||||
girdName: '',
|
||||
healthyStatus: '',
|
||||
age: '',
|
||||
birthday: '',
|
||||
isHousehold: '',
|
||||
photo: '',
|
||||
riskType: '',
|
||||
detail: '',
|
||||
disabilityType: '', // 残疾类型
|
||||
disabilityCertificateYear: '',
|
||||
basicsCheck: '', // 基础保险
|
||||
guaranteeCheck: '', // 保障措施
|
||||
mandarin: '',
|
||||
employmentChannels: '',
|
||||
migrantEnterprises: '',
|
||||
publicWelfarePosts: '',
|
||||
publicWelfarePostsMonths: '',
|
||||
foreignWorkers: '',
|
||||
foreignWorkersAddress: '',
|
||||
houseIdNumber: '',
|
||||
},
|
||||
id: '',
|
||||
$areaId: '',
|
||||
isEdit: false,
|
||||
girdInfo: {},
|
||||
householdIdNumber: '',
|
||||
objectType: '',
|
||||
userList: [],
|
||||
photo: [],
|
||||
flag: false,
|
||||
helthList: [],
|
||||
namelist: [],
|
||||
basicsCheckList: [
|
||||
{dictName: '城乡居民基本医疗保险', checked: false},
|
||||
{dictName: '城镇职工基本医疗保险', checked: false},
|
||||
{dictName: '大病保险', checked: false},
|
||||
{dictName: '商业补充医疗保险', checked: false},
|
||||
{dictName: '城乡居民基本养老保险', checked: false},
|
||||
{dictName: '城镇职工基本养老保险', checked: false},
|
||||
{dictName: '享受人身意外保险补贴', checked: false},
|
||||
],
|
||||
basicsList: [],
|
||||
guaranteeCheckList: [
|
||||
{dictName: '享受农村最低生活保障', checked: false},
|
||||
{dictName: '是否特困供养人员', checked: false},
|
||||
{dictName: '分散供养五保户转集中供养（减少）', checked: false},
|
||||
{dictName: '是否接受医疗救助', checked: false},
|
||||
{dictName: '是否接受其它健康扶贫', checked: false},
|
||||
],
|
||||
guaranteeList: [],
|
||||
isAdd: 'false',
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapState(['user'])
|
||||
},
|
||||
|
||||
onLoad(query) {
|
||||
this.householdIdNumber = query.houseIdNumber
|
||||
this.objectType = query.objectType
|
||||
this.$dict.load(['fpRelationship', 'riskEliminationMethod', 'fpRiskType', 'fpYesOrNo', 'fpNation', 'fpEducation', 'fpStudentsInSchool', 'fpHealth',
|
||||
'fpLaborSkills', 'fpPoliticalOutlook', 'sex', 'fpHealth']).then(() => {
|
||||
if (query.id) {
|
||||
this.id = query.id
|
||||
this.getInfo(query.id)
|
||||
this.isEdit = true
|
||||
}
|
||||
})
|
||||
this.$dict.getDict('fpHealth').map((item) => {
|
||||
this.helthList.push({
|
||||
dictName: item.dictName,
|
||||
dictValue: item.dictValue,
|
||||
checked: false,
|
||||
})
|
||||
})
|
||||
if (query.index > -1) {
|
||||
this.isEdit = true
|
||||
this.index = Number(query.index)
|
||||
}
|
||||
|
||||
this.isGirdUser()
|
||||
this.$areaId = this.user.areaId
|
||||
uni.$on('reload', () => {
|
||||
this.getInfo()
|
||||
})
|
||||
},
|
||||
|
||||
onShow() {
|
||||
document.title = this.id ? '编辑家庭成员' : '添加家庭成员'
|
||||
},
|
||||
|
||||
methods: {
|
||||
userClick(row, i) {
|
||||
row.checked = !row.checked
|
||||
this.form.healthyStatus = this.helthList.filter(e => e.checked)?.map(e => e.dictValue)?.toString()
|
||||
},
|
||||
|
||||
// 医疗保险
|
||||
basicsCheck(row, i) {
|
||||
this.basicsCheckList[i].checked = !this.basicsCheckList[i].checked
|
||||
},
|
||||
// 保障措施
|
||||
guaranteeCheck(row, i) {
|
||||
this.guaranteeCheckList[i].checked = !this.guaranteeCheckList[i].checked
|
||||
},
|
||||
getInfo(id) {
|
||||
this.$http.post(`/app/apppreventionreturntopoverty/queryDetailById?id=${id}`).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.form = {...res.data}
|
||||
if (this.form.photo) {
|
||||
this.form.files = [{url: this.form.photo}]
|
||||
} else {
|
||||
this.form.files = []
|
||||
}
|
||||
|
||||
res.data.healthyStatusList = res.data.healthyStatus.split(',')
|
||||
res.data.healthyStatusList.map((item) => {
|
||||
this.helthList.map(items => {
|
||||
items.checked = item == items.dictValue
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
rules() {
|
||||
return {
|
||||
householdRelation: '请选择与户主关系',
|
||||
name: '请输入姓名',
|
||||
idNumber: '请输入身份证号',
|
||||
phone: '请输入联系方式',
|
||||
currentAreaId: '请选择现住址',
|
||||
}
|
||||
},
|
||||
|
||||
checkInit(formName, list, index) {
|
||||
if (list[index].checked) {
|
||||
this.form[formName] = '01'
|
||||
} else {
|
||||
this.form[formName] = '02'
|
||||
}
|
||||
},
|
||||
|
||||
submit() {
|
||||
|
||||
const rules = this.rules()
|
||||
|
||||
for (let v of Object.keys(rules)) {
|
||||
if (!this.form[v]) {
|
||||
return this.$u.toast(rules[v])
|
||||
}
|
||||
}
|
||||
let regTel = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
|
||||
if (this.form.phone.length == 11 && !regTel.test(this.form.phone)) {
|
||||
return this.$u.toast('请输入正确的手机号')
|
||||
}
|
||||
if (!/[^0]0{0,2}$/.test(this.form.currentAreaId)) {
|
||||
return this.$u.toast('现住址必须选到村级')
|
||||
}
|
||||
|
||||
if (this.form.files.length) {
|
||||
this.form.photo = this.form.files[0].url
|
||||
}
|
||||
if (this.photo.length) {
|
||||
this.form.photo = this.photo[0].accessUrl
|
||||
}
|
||||
|
||||
this.form.girdId = this.girdInfo.girdId
|
||||
this.form.girdName = this.girdInfo.girdName
|
||||
this.current = 1
|
||||
|
||||
// if(!this.form.riskType) {
|
||||
// return this.$u.toast('请选择风险因素')
|
||||
// }
|
||||
|
||||
this.basicsCheckList.map((item, index) => {
|
||||
if (item.checked) {
|
||||
this.basicsList.push(index)
|
||||
}
|
||||
})
|
||||
|
||||
this.form.basicsCheck = this.basicsList.join(',')
|
||||
|
||||
this.guaranteeCheckList.map((item, index) => {
|
||||
if (item.checked) {
|
||||
this.guaranteeList.push(index)
|
||||
}
|
||||
})
|
||||
|
||||
this.form.guaranteeCheck = this.guaranteeList.join(',')
|
||||
|
||||
this.checkInit('jcbxCxyiliao', this.basicsCheckList, 0)
|
||||
this.checkInit('jcbxCzyiliao', this.basicsCheckList, 1)
|
||||
this.checkInit('jcbxDabing', this.basicsCheckList, 2)
|
||||
this.checkInit('jcbxShangye', this.basicsCheckList, 3)
|
||||
this.checkInit('jcbxCxyanglao', this.basicsCheckList, 4)
|
||||
this.checkInit('jcbxCzyanglao', this.basicsCheckList, 5)
|
||||
this.checkInit('jcbxRenshenyiwai', this.basicsCheckList, 6)
|
||||
|
||||
this.checkInit('bzcsNongcundibao', this.guaranteeCheckList, 0)
|
||||
this.checkInit('bzcsTekungongyang', this.guaranteeCheckList, 1)
|
||||
this.checkInit('bzcsWubaohu', this.guaranteeCheckList, 2)
|
||||
this.checkInit('bzcsYiliaojiuzhu', this.guaranteeCheckList, 3)
|
||||
this.checkInit('bzcsQita', this.guaranteeCheckList, 4)
|
||||
|
||||
this.$http.post('/app/apppreventionreturntopoverty/addByEwechat', {
|
||||
...this.form,
|
||||
id: this.id || '',
|
||||
girdId: this.user.girdCheckType == 1 ? this.user.girdId : '',
|
||||
householdIdNumber: this.householdIdNumber,
|
||||
isHousehold: '0',
|
||||
}).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.$u.toast('保存成功')
|
||||
uni.$emit('reload')
|
||||
setTimeout(() => {
|
||||
uni.navigateBack({
|
||||
delta: 2
|
||||
})
|
||||
},600)
|
||||
}
|
||||
}).catch((err) => {
|
||||
this.$u.toast(err)
|
||||
})
|
||||
},
|
||||
|
||||
isGirdUser() {
|
||||
this.$http.post('/app/appgirdmemberinfo/checkLogOnUser').then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.girdInfo = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
changeIdNumber() {
|
||||
// let reg = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
|
||||
// .length == 18 && !reg.test(this.form.idNumber)
|
||||
if (!this.form.idNumber) {
|
||||
return this.$u.toast('请输入正确的身份证号码')
|
||||
}
|
||||
var info = this.$idCardNoUtil.getIdCardInfo(this.form.idNumber)
|
||||
this.form.sex = info.gender
|
||||
this.form.birthDate = info.birthday
|
||||
var myDate = new Date();
|
||||
var month = myDate.getMonth() + 1;
|
||||
var day = myDate.getDate();
|
||||
var age = myDate.getFullYear() - this.form.idNumber.substring(6, 10) - 1;
|
||||
if (this.form.idNumber.substring(10, 12) < month || this.form.idNumber.substring(10, 12) == month && this.form.idNumber.substring(12, 14) <= day) {
|
||||
age++;
|
||||
}
|
||||
this.form.age = age
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
userList: {
|
||||
handler: function (v) {
|
||||
let {name, idNumber, currentAreaId, currentAreaName} = v?.[0] || {}
|
||||
this.form = {...this.form, name, idNumber, currentAreaId, currentAreaName}
|
||||
this.form.sex = this.$idCardNoUtil.getIdCardInfo(idNumber)?.sex
|
||||
this.form.birthday = this.$idCardNoUtil.getIdCardInfo(idNumber)?.birthday
|
||||
this.form.age = this.$calcAge(this.form.idNumber)
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.add {
|
||||
padding-bottom: 120px;
|
||||
width: 100%;
|
||||
|
||||
::v-deep .u-radio {
|
||||
&:last-child {
|
||||
.u-radio__label {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > div {
|
||||
margin-bottom: 16px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
.form-item {
|
||||
padding-left: 32px;
|
||||
|
||||
.form-item__wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 112px;
|
||||
border-bottom: 1px solid #E4E5E6;
|
||||
}
|
||||
|
||||
.form-item__wrappers {
|
||||
padding-right: 30px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.top {
|
||||
font-size: 32px;
|
||||
padding: 32px 0;
|
||||
}
|
||||
|
||||
.bottoms {
|
||||
padding-bottom: 20px;
|
||||
|
||||
.cards {
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #CCCCCC;
|
||||
border-radius: 16px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
.changeActive {
|
||||
color: #1174FE;
|
||||
border: 1px solid #1174FE;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
height: 112px;
|
||||
line-height: 112px;
|
||||
padding-right: 32px;
|
||||
|
||||
span {
|
||||
font-size: 30px;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.check-item {
|
||||
display: inline-block;
|
||||
width: 140px;
|
||||
height: 64px;
|
||||
line-height: 64px;
|
||||
text-align: center;
|
||||
background: #F5F5F5;
|
||||
border-radius: 4px;
|
||||
font-size: 30px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
position: relative;
|
||||
|
||||
img {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.check-item:nth-of-type(1) {
|
||||
margin-right: 36px;
|
||||
}
|
||||
|
||||
.check-active {
|
||||
background: #E7F1FE;
|
||||
color: #1174FE;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
height: 100%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
color: #333333;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
i {
|
||||
margin-right: 4px;
|
||||
font-style: normal;
|
||||
color: #FF4466;
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-item__imgs {
|
||||
padding: 32px;
|
||||
|
||||
.form-item__title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 34px;
|
||||
|
||||
h2 {
|
||||
color: #333333;
|
||||
font-weight: normal;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
i {
|
||||
color: #999999;
|
||||
font-size: 28px;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.form-type {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 112px;
|
||||
padding: 0 32px;
|
||||
|
||||
h2 {
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #999999;
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 11;
|
||||
width: 100%;
|
||||
height: 112px;
|
||||
line-height: 112px;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
font-size: 32px;
|
||||
background: #3192F4;
|
||||
}
|
||||
|
||||
.upload {
|
||||
width: 100%;
|
||||
padding: 10px 32px 32px 32px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.border-b0 {
|
||||
border-bottom: 0 !important;
|
||||
}
|
||||
|
||||
::v-deep .familyMember .item {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
195
src/project/grid/AppMonitoringObject/MonitorAddLog.vue
Normal file
195
src/project/grid/AppMonitoringObject/MonitorAddLog.vue
Normal file
@@ -0,0 +1,195 @@
|
||||
<template>
|
||||
<div class="form">
|
||||
<div class="help" v-if="type == 1">
|
||||
<div><span style="color: #FF4466;">*</span>帮扶类型</div>
|
||||
<AiSelect dict="fpAssistanceMeasures" v-model="operationDesc"></AiSelect>
|
||||
</div>
|
||||
<div class="form-item form-item__textarea">
|
||||
<div class="form-item__title">
|
||||
<em>*</em>
|
||||
<h2>{{type == 1 ? '帮扶内容' : '走访内容'}}</h2>
|
||||
</div>
|
||||
<textarea maxlength="500" v-model="detail" :placeholder="type == 1 ? '请输入帮扶内容' : '请输入走访内容'"></textarea>
|
||||
<div class="hint">{{ detail.length }}/500</div>
|
||||
</div>
|
||||
<div class="form-item form-item__imgs">
|
||||
<div class="form-item__title">
|
||||
<h2>图片</h2>
|
||||
<i>（最多9张）</i>
|
||||
</div>
|
||||
<div>
|
||||
<AiUploader :def.sync="files" multiple placeholder="上传图片" :limit="9" action="/admin/file/add2"></AiUploader>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn" @click="submit">提交</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
detail: '',
|
||||
pid: '',
|
||||
files: [],
|
||||
id: '',
|
||||
type: '',
|
||||
operationDesc: '',
|
||||
flag: false,
|
||||
}
|
||||
},
|
||||
onLoad(query) {
|
||||
this.$dict.load('fpAssistanceMeasures')
|
||||
this.pid = query.pid
|
||||
this.type = query.type
|
||||
if(query.id) {
|
||||
this.id = query.id
|
||||
this.getInfo()
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
if(this.type == 1) {
|
||||
document.title = this.id ? '编辑帮扶措施' : '添加帮扶措施'
|
||||
}else {
|
||||
document.title = this.id ? '编辑走访日志' : '添加走访日志'
|
||||
}
|
||||
|
||||
},
|
||||
methods: {
|
||||
getInfo() {
|
||||
this.$http.post(`/app/apppreventionreturntopovertylog/queryDetailById?id=${this.id}`).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.operationDesc = res.data.operationDesc
|
||||
this.detail = res.data.detail
|
||||
this.files = res.data.files || []
|
||||
}
|
||||
})
|
||||
},
|
||||
submit() {
|
||||
if(this.flag) return
|
||||
if(this.type == 1) {
|
||||
if (!this.operationDesc) {
|
||||
return this.$u.toast('请选择帮扶类型')
|
||||
}
|
||||
if (!this.detail) {
|
||||
return this.$u.toast('请输入帮扶内容')
|
||||
}
|
||||
} else {
|
||||
if (!this.detail) {
|
||||
return this.$u.toast('请输入走访内容')
|
||||
}
|
||||
}
|
||||
|
||||
this.flag = true
|
||||
this.$http.post('/app/apppreventionreturntopovertylog/addOrUpdate', {
|
||||
detail: this.detail,
|
||||
files: this.files,
|
||||
pid: this.pid,
|
||||
id: this.id,
|
||||
type: this.type,
|
||||
operationDesc: this.operationDesc
|
||||
}).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.$u.toast('提交成功')
|
||||
uni.$emit('reload')
|
||||
setTimeout(() => {
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
})
|
||||
}, 300)
|
||||
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.form {
|
||||
padding-bottom: 120px;
|
||||
|
||||
.help {
|
||||
padding: 32px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background: #fff;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
padding: 32px;
|
||||
background: #fff;
|
||||
margin-bottom: 16px;
|
||||
|
||||
.form-item__title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 34px;
|
||||
|
||||
em {
|
||||
margin-right: 4px;
|
||||
font-style: normal;
|
||||
color: #FF4466;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #333333;
|
||||
font-weight: normal;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
i {
|
||||
color: #999999;
|
||||
font-size: 28px;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.form-type {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 112px;
|
||||
padding: 0 32px;
|
||||
|
||||
h2 {
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #999999;
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 11;
|
||||
width: 100%;
|
||||
height: 112px;
|
||||
line-height: 112px;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
font-size: 32px;
|
||||
background: #3192F4;
|
||||
}
|
||||
|
||||
.hint{
|
||||
text-align: right;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
164
src/project/grid/AppMonitoringObject/MonitorAddView.vue
Normal file
164
src/project/grid/AppMonitoringObject/MonitorAddView.vue
Normal file
@@ -0,0 +1,164 @@
|
||||
<template>
|
||||
<div class="MonitorAddView">
|
||||
<div class="containter">
|
||||
<div class="type" v-if="status == 3 || status == 4 || status == 0">
|
||||
<div><span style="color: #FF4466">*</span>风险因素</div>
|
||||
<div>
|
||||
<AiSelect dict="fpRiskType" v-model="riskType" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="type" v-if="status == 1">
|
||||
<div><span style="color: #FF4466">*</span>风险消除方式</div>
|
||||
<div>
|
||||
<AiSelect dict="fpRiskEliminationMethod" v-model="riskEliminationMethod" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="remark">
|
||||
<div class="title"><span style="display: inline-block;width: 8px;"></span>备注说明</div>
|
||||
<u-input v-model="opinion" type="textarea" placeholder="请输入备注说明" height="200" :maxlength="500"></u-input>
|
||||
</div>
|
||||
<div class="remark">
|
||||
<div class="title"><span style="display: inline-block;width: 8px;"></span>图片<span style="color: #999999;font-size: 14px;">(最多9张)</span></div>
|
||||
<div style="padding-bottom: 20px; box-sizing: border-box;">
|
||||
<AiUploader :def.sync="file" multiple placeholder="上传图片" :limit="9" action="/admin/file/add2"></AiUploader>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="btn" @click="submit">提交</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'MonitorAddView',
|
||||
data() {
|
||||
return {
|
||||
riskType: '',
|
||||
opinion: '',
|
||||
pass: '',
|
||||
file: [],
|
||||
filesList: [],
|
||||
riskEliminationMethod: '',
|
||||
status: '',
|
||||
}
|
||||
},
|
||||
onLoad(o) {
|
||||
this.$dict.load('fpRiskType')
|
||||
this.pass = o.pass,
|
||||
this.id = o.id
|
||||
this.status = o.status
|
||||
},
|
||||
onShow() {
|
||||
document.title = (this.status == 3 || this.status == 4 ) && this.pass ==''? '申请纳入监测': this.status == 1 && this.pass ==''? '申请解除风险' : this.status == 1 && this.pass ==1? '解除风险': (this.status == 4 || this.status==3) && this.pass == 1? '纳入监测':''
|
||||
},
|
||||
methods: {
|
||||
submit() {
|
||||
var url = ''
|
||||
var params = {
|
||||
pass: this.pass || '',
|
||||
opinion: this.opinion,
|
||||
files: this.filesList,
|
||||
id: this.id,
|
||||
riskType: this.riskType,
|
||||
riskEliminationMethod: this.riskEliminationMethod,
|
||||
}
|
||||
if(this.pass == 1) { // 网格长
|
||||
if(!this.riskEliminationMethod) {
|
||||
return this.$u.toast('请选择风险消除方式')
|
||||
}
|
||||
if(this.status == 1) {
|
||||
url = '/app/apppreventionreturntopoverty/relieve' // 解除
|
||||
} else if (this.status == 4 || this.status == 3) {
|
||||
if(!this.riskType) {
|
||||
return this.$u.toast('请选择风险因素')
|
||||
}
|
||||
url = `/app/apppreventionreturntopoverty/examine` // 纳入监测
|
||||
}
|
||||
} else { // 网格员
|
||||
if(this.status == '0' || this.status == '3' || this.status == '4') {
|
||||
if(!this.riskType) {
|
||||
return this.$u.toast('请选择风险因素')
|
||||
}
|
||||
}
|
||||
if(this.status == '1') {
|
||||
if(!this.riskEliminationMethod) {
|
||||
return this.$u.toast('请选择风险消除方式')
|
||||
}
|
||||
}
|
||||
if(this.file.length > 0) {
|
||||
var files = []
|
||||
this.file.map(item => {
|
||||
files.push(item.id)
|
||||
})
|
||||
this.filesList = files.join(',')
|
||||
}
|
||||
|
||||
if(this.status == 0 || this.status == 3 || this.status == 4) {
|
||||
url = `/app/apppreventionreturntopoverty/examine` // 纳入监测申请
|
||||
} else {
|
||||
url = `/app/apppreventionreturntopoverty/relieve` // 消除申请
|
||||
}
|
||||
}
|
||||
|
||||
var formData = new FormData()
|
||||
for (let key in params) {
|
||||
formData.append(key, params[key])
|
||||
}
|
||||
this.$http.post(url , formData).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.$u.toast('提交成功')
|
||||
uni.$emit('reload')
|
||||
setTimeout(() => {
|
||||
uni.navigateBack({
|
||||
delta: 2
|
||||
})
|
||||
},600)
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.MonitorAddView {
|
||||
.containter {
|
||||
padding-bottom: 112px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.type {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 112px;
|
||||
line-height: 112px;
|
||||
background: #FFF;
|
||||
padding: 0 32px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.remark {
|
||||
margin-top: 16px;
|
||||
background: #FFF;
|
||||
padding: 0 32px;
|
||||
box-sizing: border-box;
|
||||
.title {
|
||||
padding: 30px 0 15px 0;
|
||||
}
|
||||
}
|
||||
::v-deep .ai-uploader .fileList .default {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
}
|
||||
.btn {
|
||||
width: 100%;
|
||||
height: 112px;
|
||||
line-height: 112px;
|
||||
text-align: center;
|
||||
background: #3192F4;
|
||||
color: #FFFFFF;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
274
src/project/grid/AppMonitoringObject/MonitorFamilyMember.vue
Normal file
274
src/project/grid/AppMonitoringObject/MonitorFamilyMember.vue
Normal file
@@ -0,0 +1,274 @@
|
||||
<template>
|
||||
<div class="familyMember" v-if="pageShow">
|
||||
<div class="item" v-for="(item, index) in list" :key="index">
|
||||
<div class="item-title">
|
||||
<div class="top">
|
||||
<div class="left">
|
||||
<h2>{{ item.name }}</h2>
|
||||
<span>{{ item.idNumber.replace(/(.{6}).*(.{4})/, '$1********$2') }}</span>
|
||||
</div>
|
||||
<span v-if="item.isHousehold == 1">户主</span>
|
||||
<span v-else>{{ $dict.getLabel('fpRelationship', item.householdRelation) }}</span>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<span>{{ $dict.getLabel('sex', item.sex) }}</span>
|
||||
<span>{{ item.age }}岁</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-bottom">
|
||||
<span @click="showMore(item.id)">查看详情</span>
|
||||
<span @click="remove(index)" v-if="item.isHousehold != 1">删除</span>
|
||||
<span v-else></span>
|
||||
</div>
|
||||
</div>
|
||||
<AiFixedBtn>
|
||||
<div class="addBtn iconfont iconfont-iconfangda" @tap="toAdd"></div>
|
||||
</AiFixedBtn>
|
||||
<div class="no-more" v-if="!list.length">
|
||||
<image src="https://cdn.cunwuyun.cn/dvcp/h5/no-admin.png"/>
|
||||
<div>
|
||||
<span>您还未添加过家庭成员点击</span>
|
||||
<i @tap="toAdd">新增按钮</i>
|
||||
<span>试试吧~</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
id: '',
|
||||
info: {},
|
||||
pageShow: false,
|
||||
houseIdNumber: '',
|
||||
objectType: '',
|
||||
}
|
||||
},
|
||||
|
||||
onShow() {
|
||||
document.title = '家庭成员'
|
||||
},
|
||||
|
||||
onLoad(query) {
|
||||
this.houseIdNumber = query.houseIdNumber
|
||||
this.objectType = query.objectType
|
||||
this.$dict.load(['fpRelationship','riskEliminationMethod', 'fpRiskType', 'fpYesOrNo', 'fpNation', 'fpEducation', 'fpStudentsInSchool', 'fpHealth',
|
||||
'fpLaborSkills', 'fpPoliticalOutlook', 'sex', 'fpHealth']).then(() => {
|
||||
if(query.id) {
|
||||
this.id = query.id
|
||||
this.getInfo()
|
||||
}
|
||||
})
|
||||
|
||||
uni.$on('reload', () => {
|
||||
this.getInfo()
|
||||
})
|
||||
},
|
||||
|
||||
methods: {
|
||||
toAdd() {
|
||||
uni.navigateTo({
|
||||
url: `./MonitorAddFamilyMember?houseIdNumber=${this.houseIdNumber}&objectType=${this.objectType}`
|
||||
})
|
||||
},
|
||||
|
||||
toEdit(index) {
|
||||
this.$confirm('确定编辑该数据？').then(() => {
|
||||
uni.navigateTo({
|
||||
url: `./MonitorAddFamilyMember?id=${this.list[index].id}&houseIdNumber=${this.houseIdNumber}&objectType=${this.objectType}`
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
remove(index) {
|
||||
this.$confirm('', '确定删除该数据？').then(() => {
|
||||
this.$http.post(`/app/apppreventionreturntopoverty/delete?ids=${this.list[index].id}`).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.$u.toast('删除成功')
|
||||
uni.$emit('reload')
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
showMore(id) {
|
||||
uni.navigateTo({url: `./residentDetail?id=${id}`})
|
||||
},
|
||||
|
||||
getInfo() {
|
||||
this.$http.post(`/app/apppreventionreturntopoverty/queryDetailById?id=${this.id}`).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.info = res.data
|
||||
if(res.data.family && res.data.family.length) {
|
||||
this.list = res.data.family.map(item => {
|
||||
return {
|
||||
...item,
|
||||
isShow: false,
|
||||
age: this.$calcAge(item.idNumber)
|
||||
}
|
||||
})
|
||||
}
|
||||
this.pageShow = true
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.familyMember {
|
||||
padding: 32px 0;
|
||||
|
||||
.no-more {
|
||||
padding-top: 160px;
|
||||
text-align: center;
|
||||
|
||||
image {
|
||||
width: 282px;
|
||||
height: 304px;
|
||||
}
|
||||
|
||||
div {
|
||||
width: 280px;
|
||||
margin: 0 auto;
|
||||
|
||||
span {
|
||||
color: #999999;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
i {
|
||||
font-style: normal;
|
||||
color: #467DFE;
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.addBtn {
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
flex-shrink: 0;
|
||||
background: $uni-color-primary;
|
||||
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
|
||||
font-size: 48px;
|
||||
color: #fff;
|
||||
border-radius: 50%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 686px;
|
||||
margin: 0 auto 32px;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
|
||||
.item-bottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 32px;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
height: 94px;
|
||||
|
||||
span {
|
||||
height: 100%;
|
||||
line-height: 96px;
|
||||
color: #3975C6;
|
||||
font-size: 26px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.item-title {
|
||||
padding: 32px;
|
||||
background: #FFFFFF;
|
||||
border-bottom: 1px solid #DDDDDD;
|
||||
|
||||
.top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 8px;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
h2 {
|
||||
margin-right: 32px;
|
||||
color: #333333;
|
||||
font-size: 40px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #999999;
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
& > span {
|
||||
color: #3975C6;
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
background: #F9F9F9;
|
||||
|
||||
.item-info__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 50%;
|
||||
height: 72px;
|
||||
padding: 0 20px;
|
||||
border-bottom: 1px solid #DDDDDD;
|
||||
border-right: 1px solid #DDDDDD;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:nth-of-type(2n) {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
color: #999999;
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #3975C6;
|
||||
font-size: 26px;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
color: #999999;
|
||||
font-size: 28px;
|
||||
|
||||
&:first-child {
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
594
src/project/grid/AppMonitoringObject/MonitorFamilySituation.vue
Normal file
594
src/project/grid/AppMonitoringObject/MonitorFamilySituation.vue
Normal file
@@ -0,0 +1,594 @@
|
||||
<template>
|
||||
<div class="add">
|
||||
<div class="form-group">
|
||||
<p>生活条件</p>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i></i>
|
||||
<span>户类型</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<AiSelect dict="fpHouseType" v-model="form.houseType"></AiSelect>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i></i>
|
||||
<span>住房面积（m²）</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<u-input v-model="form.houseArea" placeholder="请输入" placeholder-style="font-size: 15px;" type="number"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i></i>
|
||||
<span>与村主干路距离（公里）</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<u-input v-model="form.trunkRoadDistance" placeholder="请输入" placeholder-style="font-size: 15px;" type="number" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i></i>
|
||||
<span>入户路类型</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<AiSelect dict="fpHouseRoadType" v-model="form.houseRoadType"></AiSelect>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i></i>
|
||||
<span>主要燃料类型</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<AiSelect dict="fpFuelType" v-model="form.fuelType"></AiSelect>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group" style="margin-top: 8px;">
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i>*</i>
|
||||
<span>是否危房</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="check-item" :class="form.dilapidatedHousehold == '01' ? 'check-active' : '' " @click="form.dilapidatedHousehold='01'">是<img src="./components/img/check-icon.png" alt=""></div>
|
||||
<div class="check-item" :class="form.dilapidatedHousehold == '02' ? 'check-active' : '' " @click="form.dilapidatedHousehold='02'">否<img src="./components/img/check-icon.png" alt=""></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i>*</i>
|
||||
<span>是否解决安全饮水</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="check-item" :class="form.drinkingWaterSafety == '01' ? 'check-active' : '' " @click="form.drinkingWaterSafety='01'">是<img src="./components/img/check-icon.png" alt=""></div>
|
||||
<div class="check-item" :class="form.drinkingWaterSafety == '02' ? 'check-active' : '' " @click="form.drinkingWaterSafety='02'">否<img src="./components/img/check-icon.png" alt=""></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i>*</i>
|
||||
<span>是否住房损坏</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="check-item" :class="form.houseDamage == '01' ? 'check-active' : '' " @click="form.houseDamage='01'">是<img src="./components/img/check-icon.png" alt=""></div>
|
||||
<div class="check-item" :class="form.houseDamage == '02' ? 'check-active' : '' " @click="form.houseDamage='02'">否<img src="./components/img/check-icon.png" alt=""></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i>*</i>
|
||||
<span>是否饮水设施损坏</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="check-item" :class="form.drinkingWaterDamage == '01' ? 'check-active' : '' " @click="form.drinkingWaterDamage='01'">是<img src="./components/img/check-icon.png" alt=""></div>
|
||||
<div class="check-item" :class="form.drinkingWaterDamage == '02' ? 'check-active' : '' " @click="form.drinkingWaterDamage='02'">否<img src="./components/img/check-icon.png" alt=""></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i>*</i>
|
||||
<span>是否有卫生厕所</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="check-item" :class="form.toilet == '01' ? 'check-active' : '' " @click="form.toilet='01'">是<img src="./components/img/check-icon.png" alt=""></div>
|
||||
<div class="check-item" :class="form.toilet == '02' ? 'check-active' : '' " @click="form.toilet='02'">否<img src="./components/img/check-icon.png" alt=""></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i>*</i>
|
||||
<span>是否通生活用电</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="check-item" :class="form.electric == '01' ? 'check-active' : '' " @click="form.electric='01'">是<img src="./components/img/check-icon.png" alt=""></div>
|
||||
<div class="check-item" :class="form.electric == '02' ? 'check-active' : '' " @click="form.electric='02'">否<img src="./components/img/check-icon.png" alt=""></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i>*</i>
|
||||
<span>是否通广播电视</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="check-item" :class="form.television == '01' ? 'check-active' : '' " @click="form.television='01'">是<img src="./components/img/check-icon.png" alt=""></div>
|
||||
<div class="check-item" :class="form.television == '02' ? 'check-active' : '' " @click="form.television='02'">否<img src="./components/img/check-icon.png" alt=""></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group" style="margin-top: 8px;">
|
||||
<p>生产条件</p>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i></i>
|
||||
<span>耕地面积(亩)</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<u-input v-model="form.cultivatedLandArea" placeholder="请输入" placeholder-style="font-size: 15px;" type="number" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i></i>
|
||||
<span>林果面积(亩)</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<u-input v-model="form.orchardArea" placeholder="请输入" placeholder-style="font-size: 15px;" type="number" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i></i>
|
||||
<span>林地面积(亩)</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<u-input v-model="form.woodlandArea" placeholder="请输入" placeholder-style="font-size: 15px;" type="number" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i></i>
|
||||
<span>退耕还林面积(亩)</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<u-input v-model="form.grainForGreenArea" placeholder="请输入" placeholder-style="font-size: 15px;" type="number" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i></i>
|
||||
<span>牧草地面积(亩)</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<u-input v-model="form.grazingGrasslandArea" placeholder="请输入" placeholder-style="font-size: 15px;" type="number" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i></i>
|
||||
<span>水面面积(亩)</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<u-input v-model="form.watersArea" placeholder="请输入" placeholder-style="font-size: 15px;" type="number" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group" style="margin-top: 8px;">
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i>*</i>
|
||||
<span>是否有龙头企业带动</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="check-item" :class="form.longtouqiye == '01' ? 'check-active' : '' " @click="form.longtouqiye='01'">是<img src="./components/img/check-icon.png" alt=""></div>
|
||||
<div class="check-item" :class="form.longtouqiye == '02' ? 'check-active' : '' " @click="form.longtouqiye='02'">否<img src="./components/img/check-icon.png" alt=""></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i>*</i>
|
||||
<span>是否通生产用电</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="check-item" :class="form.produceElectric == '01' ? 'check-active' : '' " @click="form.produceElectric='01'">是<img src="./components/img/check-icon.png" alt=""></div>
|
||||
<div class="check-item" :class="form.produceElectric == '02' ? 'check-active' : '' " @click="form.produceElectric='02'">否<img src="./components/img/check-icon.png" alt=""></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i>*</i>
|
||||
<span>是否加入农民专业合作社</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="check-item" :class="form.nongheshe == '01' ? 'check-active' : '' " @click="form.nongheshe='01'">是<img src="./components/img/check-icon.png" alt=""></div>
|
||||
<div class="check-item" :class="form.nongheshe == '02' ? 'check-active' : '' " @click="form.nongheshe='02'">否<img src="./components/img/check-icon.png" alt=""></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i>*</i>
|
||||
<span>是否有创业致富带头人带动</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="check-item" :class="form.cyzfdtr == '01' ? 'check-active' : '' " @click="form.cyzfdtr='01'">是<img src="./components/img/check-icon.png" alt=""></div>
|
||||
<div class="check-item" :class="form.cyzfdtr == '02' ? 'check-active' : '' " @click="form.cyzfdtr='02'">否<img src="./components/img/check-icon.png" alt=""></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="btn" hover-class="text" @click="submit">保存</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
houseType: '',
|
||||
dilapidatedHousehold: '',
|
||||
drinkingWaterSafety: '',
|
||||
move: '',
|
||||
houseArea: '',
|
||||
trunkRoadDistance: '',
|
||||
houseRoadType: '',
|
||||
fuelType:'',
|
||||
houseDamage: '',
|
||||
drinkingWaterDamage: '',
|
||||
toilet: '',
|
||||
electric: '',
|
||||
television: '',
|
||||
cultivatedLandArea: '', // 耕地面积
|
||||
orchardArea: '',
|
||||
woodlandArea: '',
|
||||
grainForGreenArea: '',
|
||||
grazingGrasslandArea: '',
|
||||
watersArea: '',
|
||||
longtouqiye: '',
|
||||
produceElectric: '',
|
||||
nongheshe: '',
|
||||
cyzfdtr: '',
|
||||
},
|
||||
id: '',
|
||||
girdId: '',
|
||||
girdName: '',
|
||||
value: '',
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
onLoad(query) {
|
||||
this.$dict.load(['fpYesOrNo', 'fpRiskType','fpHouseRoadType','fpFuelType','fpHouseType']).then(() => {
|
||||
this.getInfo(query.id)
|
||||
})
|
||||
this.id = query.id
|
||||
this.girdId = query.girdId
|
||||
this.girdName = query.girdName
|
||||
|
||||
|
||||
},
|
||||
|
||||
onShow() {
|
||||
document.title = '生活生产条件'
|
||||
},
|
||||
|
||||
methods: {
|
||||
getInfo(id) {
|
||||
this.$http.post(`/app/apppreventionreturntopoverty/queryDetailById?id=${id}`).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.form = {
|
||||
...this.form,
|
||||
...res.data
|
||||
}
|
||||
}
|
||||
|
||||
uni.hideLoading()
|
||||
})
|
||||
},
|
||||
|
||||
submit() {
|
||||
|
||||
if(!this.form.dilapidatedHousehold) {
|
||||
return this.$u.toast('请选择是否危房')
|
||||
}
|
||||
if(!this.form.drinkingWaterSafety) {
|
||||
return this.$u.toast('请选择是否解决安全饮水')
|
||||
}
|
||||
if(!this.form.houseDamage) {
|
||||
return this.$u.toast('请选择是否住房损坏')
|
||||
}
|
||||
if(!this.form.drinkingWaterDamage) {
|
||||
return this.$u.toast('请选择是否饮水设施损坏')
|
||||
}
|
||||
if(!this.form.toilet) {
|
||||
return this.$u.toast('请选择是否有卫生厕所')
|
||||
}
|
||||
if(!this.form.electric) {
|
||||
return this.$u.toast('请选择是否通生活用电')
|
||||
}
|
||||
if(!this.form.television) {
|
||||
return this.$u.toast('请选择是否通广播电视')
|
||||
}
|
||||
if(!this.form.longtouqiye) {
|
||||
return this.$u.toast('请选择是否有龙头企业带动')
|
||||
}
|
||||
if(!this.form.produceElectric) {
|
||||
return this.$u.toast('请选择是否通生产用电')
|
||||
}
|
||||
if(!this.form.nongheshe) {
|
||||
return this.$u.toast('请选择是否加入农民专业合作社')
|
||||
}
|
||||
if(!this.form.cyzfdtr) {
|
||||
return this.$u.toast('请选择是否有创业致富带头人带动')
|
||||
}
|
||||
|
||||
this.form.girdId = this.girdId
|
||||
this.form.girdName = this.girdName
|
||||
this.$http.post('/app/apppreventionreturntopoverty/addByEwechat', {
|
||||
...this.form,
|
||||
id: this.id
|
||||
}).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.$u.toast('操作成功')
|
||||
uni.$emit('reload')
|
||||
setTimeout(() => {
|
||||
uni.navigateBack()
|
||||
}, 600)
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.add {
|
||||
padding-bottom: 120px;
|
||||
|
||||
.form-textarea {
|
||||
padding: 32px;
|
||||
|
||||
h2 {
|
||||
margin-bottom: 32px;
|
||||
color: #333333;
|
||||
font-size: 32px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
& > div {
|
||||
margin-bottom: 16px;
|
||||
// background: #fff;
|
||||
}
|
||||
|
||||
::v-deep .u-radio {
|
||||
&:last-child {
|
||||
.u-radio__label {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
::v-deep .AiSelect .display {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
background: #fff;
|
||||
p {
|
||||
color: #333333;
|
||||
font-size: 36px;
|
||||
padding: 20px 32px;
|
||||
// border-bottom: 1px solid #E4E5E6;
|
||||
font-weight: 600;
|
||||
}
|
||||
.form-item {
|
||||
padding: 0 32px;
|
||||
|
||||
.form-item__wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 112px;
|
||||
border-bottom: 1px solid #E4E5E6;
|
||||
}
|
||||
|
||||
.left {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.right {
|
||||
width: calc(100% - 300px);
|
||||
text-align: right;
|
||||
::v-deep .u-input .u-input__input .uni-input-wrapper {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 30px;
|
||||
color: #999999;
|
||||
}
|
||||
.check-item{
|
||||
display: inline-block;
|
||||
width: 160px;
|
||||
height: 64px;
|
||||
line-height: 64px;
|
||||
text-align: center;
|
||||
background: #F5F5F5;
|
||||
border-radius: 4px;
|
||||
font-size: 30px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
position: relative;
|
||||
img{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.check-item:nth-of-type(1) {
|
||||
margin-right: 36px;
|
||||
}
|
||||
.check-active{
|
||||
background: #E7F1FE;
|
||||
color: #1174FE;
|
||||
img{
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
height: 100%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
color: #333333;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
i {
|
||||
margin-right: 4px;
|
||||
font-style: normal;
|
||||
color: #FF4466;
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.form-item__wrapper {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-item__imgs {
|
||||
padding: 32px;
|
||||
|
||||
.form-item__title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 34px;
|
||||
|
||||
h2 {
|
||||
color: #333333;
|
||||
font-weight: normal;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
i {
|
||||
color: #999999;
|
||||
font-size: 28px;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.form-type {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 112px;
|
||||
padding: 0 32px;
|
||||
|
||||
h2 {
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #999999;
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 11;
|
||||
width: 100%;
|
||||
height: 112px;
|
||||
line-height: 112px;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
font-size: 32px;
|
||||
background: #3192F4;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
385
src/project/grid/AppMonitoringObject/MonitorIncome.vue
Normal file
385
src/project/grid/AppMonitoringObject/MonitorIncome.vue
Normal file
@@ -0,0 +1,385 @@
|
||||
<template>
|
||||
<div class="add">
|
||||
<div class="form-group">
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<span>工资性收入(元)</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<input placeholder="请输入" v-model.number="form.income3" type="number"
|
||||
placeholder-style="color: #999; font-size: 30rpx;" maxlength="9"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<span>生产经营收入(元)</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<input placeholder="请输入" v-model.number="form.income4" type="number"
|
||||
placeholder-style="color: #999; font-size: 30rpx;" maxlength="9"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<span>计划生育金(元)</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<input placeholder="请输入" v-model.number="form.income5" type="number"
|
||||
placeholder-style="color: #999; font-size: 30rpx;" maxlength="9"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<span>资产收益扶贫分红收入</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<input placeholder="请输入" v-model.number="form.income6" type="number"
|
||||
placeholder-style="color: #999; font-size: 30rpx;" maxlength="9"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<span>养老保险金（元）</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<input placeholder="请输入" v-model.number="form.income9" type="number"
|
||||
placeholder-style="color: #999; font-size: 30rpx;" maxlength="9"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<span>低保金（元）</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<input placeholder="请输入" v-model.number="form.income7" type="number"
|
||||
placeholder-style="color: #999; font-size: 30rpx;" maxlength="9"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<span>特困供养金（元）</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<input placeholder="请输入" v-model.number="form.income8" type="number"
|
||||
placeholder-style="color: #999; font-size: 30rpx;" maxlength="9"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<span>生态补偿金（元）</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<input placeholder="请输入" v-model.number="form.income10" type="number"
|
||||
placeholder-style="color: #999; font-size: 30rpx;" maxlength="9"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<span>财产性收入（元）</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<input placeholder="请输入" v-model.number="form.income13" type="number"
|
||||
placeholder-style="color: #999; font-size: 30rpx;" maxlength="9"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<span>其他财产性收入</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<input placeholder="请输入" v-model.number="form.income14" type="number"
|
||||
placeholder-style="color: #999; font-size: 30rpx;" maxlength="9"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<span>转移性收入（元）</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<input placeholder="请输入" v-model.number="form.income11" type="number"
|
||||
placeholder-style="color: #999; font-size: 30rpx;" maxlength="9"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<span>其他转移性收入（元）</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<input placeholder="请输入" v-model.number="form.income12" type="number"
|
||||
placeholder-style="color: #999; font-size: 30rpx;" maxlength="9"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<span>生产经营性支出（元）</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<input placeholder="请输入" v-model.number="form.income15" type="number"
|
||||
placeholder-style="color: #999; font-size: 30rpx;" maxlength="9"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<span>纳入监测对象的收入参考范围</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<input placeholder="请输入" v-model.number="form.income1" type="number"
|
||||
placeholder-style="color: #999; font-size: 30rpx;" maxlength="9"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<span>纳入监测对象的人均收入参考范围</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<input placeholder="请输入" v-model.number="form.income2" type="number"
|
||||
placeholder-style="color: #999; font-size: 30rpx;" maxlength="9"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <p class="tips">*不填时默认为0元</p> -->
|
||||
|
||||
<div class="btn" hover-class="text" @click="submit">保存</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
income1: '',
|
||||
income2: '',
|
||||
income3: '',
|
||||
income4: '',
|
||||
income5: '',
|
||||
income6: '',
|
||||
income8: '',
|
||||
income9: '',
|
||||
income10: '',
|
||||
income11: '',
|
||||
income12: '',
|
||||
income13: '',
|
||||
income14: '',
|
||||
income15: '',
|
||||
},
|
||||
id: '',
|
||||
girdId: '',
|
||||
girdName: '',
|
||||
}
|
||||
},
|
||||
|
||||
onLoad(query) {
|
||||
this.id = query.id
|
||||
this.girdId = query.girdId
|
||||
this.girdName = query.girdName
|
||||
this.getInfo(query.id)
|
||||
},
|
||||
|
||||
onShow() {
|
||||
document.title = '家庭收支情况'
|
||||
},
|
||||
|
||||
methods: {
|
||||
getInfo(id) {
|
||||
|
||||
this.$http.post(`/app/apppreventionreturntopoverty/queryDetailById?id=${id}`).then(res => {
|
||||
// var arr = ['income1','income2','income3','income4','income5','income6','income8','income9','income10','income11','income12','income13','income14','income15']
|
||||
// var newArr = {}
|
||||
if (res.code === 0) {
|
||||
// for(let key in res.data) {
|
||||
// if(arr.includes(key)) {
|
||||
// newArr = res.data[key] == 0? '':res.data[key]
|
||||
// }
|
||||
// }
|
||||
// this.form = {...newArr}
|
||||
|
||||
this.form = {
|
||||
...this.form,
|
||||
...res.data
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
submit() {
|
||||
this.form.girdId = this.girdId
|
||||
this.form.girdName = this.girdName
|
||||
this.$http.post('/app/apppreventionreturntopoverty/addByEwechat', {
|
||||
...this.form,
|
||||
id: this.id
|
||||
}).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.$u.toast('保存成功')
|
||||
uni.$emit('reload')
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.add {
|
||||
padding-bottom: 120px;
|
||||
|
||||
.tips {
|
||||
margin: 32px 0 0 32px;
|
||||
color: #999999;
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
& > div {
|
||||
margin-bottom: 16px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
.form-item {
|
||||
padding-left: 32px;
|
||||
|
||||
.form-item__wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 112px;
|
||||
border-bottom: 1px solid #E4E5E6;
|
||||
}
|
||||
|
||||
.right {
|
||||
height: 112px;
|
||||
line-height: 112px;
|
||||
padding-right: 32px;
|
||||
|
||||
span {
|
||||
font-size: 30px;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
height: 100%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
color: #333333;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
i {
|
||||
margin-right: 4px;
|
||||
font-style: normal;
|
||||
color: #FF4466;
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.form-item__wrapper {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-item__imgs {
|
||||
padding: 32px;
|
||||
|
||||
.form-item__title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 34px;
|
||||
|
||||
h2 {
|
||||
color: #333333;
|
||||
font-weight: normal;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
i {
|
||||
color: #999999;
|
||||
font-size: 28px;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.form-type {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 112px;
|
||||
padding: 0 32px;
|
||||
|
||||
h2 {
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #999999;
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 11;
|
||||
width: 100%;
|
||||
height: 112px;
|
||||
line-height: 112px;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
font-size: 32px;
|
||||
background: #3192F4;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
305
src/project/grid/AppMonitoringObject/MonitorPoorStatus.vue
Normal file
305
src/project/grid/AppMonitoringObject/MonitorPoorStatus.vue
Normal file
@@ -0,0 +1,305 @@
|
||||
<template>
|
||||
<div class="add">
|
||||
<div class="form-group">
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i style="opacity: 0;">*</i>
|
||||
<span>工资性收入情况</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<u-input v-model="form.fxxcIncome1" placeholder="请输入" placeholder-style="font-size: 15px;" type="text" maxlength="9" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i style="opacity: 0;">*</i>
|
||||
<span>生产经营性收入情况</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<u-input v-model="form.fxxcIncome2" placeholder="请输入" placeholder-style="font-size: 15px;" type="text" maxlength="9" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i style="opacity: 0;">*</i>
|
||||
<span>财产性收入情况</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<u-input v-model="form.fxxcIncome3" placeholder="请输入" placeholder-style="font-size: 15px;" type="text" maxlength="9" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i style="opacity: 0;">*</i>
|
||||
<span>理赔收入情况</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<u-input v-model="form.fxxcIncome5" placeholder="请输入" placeholder-style="font-size: 15px;" type="text" maxlength="9" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i style="opacity: 0;">*</i>
|
||||
<span>转移性收入情况</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<u-input v-model="form.fxxcIncome4" placeholder="请输入" placeholder-style="font-size: 15px;" type="text" maxlength="9" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i style="opacity: 0;">*</i>
|
||||
<span>生产经营支出情况</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<u-input v-model="form.fxxcIncome6" placeholder="请输入" placeholder-style="font-size: 15px;" type="text" maxlength="9" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i style="opacity: 0;">*</i>
|
||||
<span>合规自然支出情况</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<u-input v-model="form.fxxcIncome7" placeholder="请输入" placeholder-style="font-size: 15px;" type="text" maxlength="9" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <p class="tips">*不填时默认为0元</p> -->
|
||||
<div class="btn" hover-class="text" @click="submit">保存</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
result: '',
|
||||
form: {
|
||||
fxxcIncome1: '',
|
||||
fxxcIncome2: '',
|
||||
fxxcIncome3: '',
|
||||
fxxcIncome4: '',
|
||||
fxxcIncome5: '',
|
||||
fxxcIncome6: '',
|
||||
fxxcIncome7: '',
|
||||
},
|
||||
id: '',
|
||||
girdId: '',
|
||||
girdName: '',
|
||||
}
|
||||
},
|
||||
|
||||
onLoad(query) {
|
||||
this.$dict.load(['fpYesOrNo', 'fpRiskEliminationMethod', 'fpIndustrialAssistance', 'fpHealthAssistance', 'fpEmploymentAssistance',
|
||||
'fpEducationalAssistance', 'fpFinancialAssistance', 'fpSocialAssistance', 'fpPublicWelfarePostAssistance']).then(() => {
|
||||
this.getInfo(query.id)
|
||||
})
|
||||
this.id = query.id
|
||||
this.girdId = query.girdId
|
||||
this.girdName = query.girdName
|
||||
},
|
||||
|
||||
onShow() {
|
||||
document.title = '风险解除跟踪'
|
||||
},
|
||||
|
||||
methods: {
|
||||
getInfo(id) {
|
||||
this.$http.post(`/app/apppreventionreturntopoverty/queryDetailById?id=${id}`).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.form = {
|
||||
...this.form,
|
||||
...res.data
|
||||
}
|
||||
|
||||
if (this.form.riskEliminationMethod) {
|
||||
this.form.isRisk = '01'
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
onRiskChange(e) {
|
||||
if (e === '02') {
|
||||
this.form.riskEliminationMethod = ''
|
||||
this.form.riskEliminationDate = ''
|
||||
}
|
||||
},
|
||||
|
||||
submit() {
|
||||
this.form.girdId = this.girdId
|
||||
this.form.girdName = this.girdName
|
||||
this.$http.post('/app/apppreventionreturntopoverty/addByEwechat', {
|
||||
...this.form,
|
||||
id: this.id,
|
||||
}).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.$u.toast('保存成功')
|
||||
uni.$emit('reload')
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.add {
|
||||
padding-bottom: 120px;
|
||||
|
||||
& > div {
|
||||
margin-bottom: 16px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
::v-deep .u-radio {
|
||||
&:last-child {
|
||||
.u-radio__label {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-group {
|
||||
.form-item {
|
||||
padding-left: 32px;
|
||||
|
||||
.form-item__wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 112px;
|
||||
border-bottom: 1px solid #E4E5E6;
|
||||
}
|
||||
|
||||
.right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 112px;
|
||||
padding-right: 32px;
|
||||
|
||||
span {
|
||||
font-size: 30px;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
height: 100%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
color: #333333;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
i {
|
||||
margin-right: 4px;
|
||||
font-style: normal;
|
||||
color: #FF4466;
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.form-item__wrapper {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-item__imgs {
|
||||
padding: 32px;
|
||||
|
||||
.form-item__title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 34px;
|
||||
|
||||
h2 {
|
||||
color: #333333;
|
||||
font-weight: normal;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
i {
|
||||
color: #999999;
|
||||
font-size: 28px;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.form-type {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 112px;
|
||||
padding: 0 32px;
|
||||
|
||||
h2 {
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #999999;
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
::v-deep .u-input .u-input__input .uni-input-wrapper {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.tips {
|
||||
margin: 32px 0 0 32px;
|
||||
color: #999999;
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 11;
|
||||
width: 100%;
|
||||
height: 112px;
|
||||
line-height: 112px;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
font-size: 32px;
|
||||
background: #3192F4;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
262
src/project/grid/AppMonitoringObject/MonitorRemoveView.vue
Normal file
262
src/project/grid/AppMonitoringObject/MonitorRemoveView.vue
Normal file
@@ -0,0 +1,262 @@
|
||||
<template>
|
||||
<div class="MonitorRemoveView">
|
||||
<div class="user-info" v-if="info">
|
||||
<div class="title">审核信息</div>
|
||||
<div class="info">
|
||||
<div class="item">
|
||||
<span>操作类型：</span>
|
||||
<span style="color: #2EA222;" v-if="info.operationType == 0">申请纳入监测</span>
|
||||
<span style="color: #2EA222;" v-if="info.operationType == 1">申请解除风险</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span>监测类型：</span>
|
||||
<span v-if="info.operationType == 0">{{ $dict.getLabel('fpRiskType',info.bizDictValue) }}</span>
|
||||
<span v-if="info.operationType == 1">{{ $dict.getLabel('fpRiskEliminationMethod',info.bizDictValue) }}</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span>申请人：</span>
|
||||
<span>{{ info.operationUserName }}</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span>申请时间：</span>
|
||||
<span>{{ info.createTime }}</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span>备注说明：</span>
|
||||
<span>{{ info.detail }}</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span style="color: #999;">图片：</span>
|
||||
<div class="imgs" v-if="info.files && info.files.length">
|
||||
<image :src="img.url" @click="prevImg(info.files, img.url)" v-for="(img, index) in info.files"
|
||||
:key="index"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="result">
|
||||
<div class="title">处理意见</div>
|
||||
<div class="check">
|
||||
<div class="left">
|
||||
<span style="color: #FF4466;">*</span>
|
||||
<span>审核结果</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="check-item" :class="form.pass == '1' ? 'check-active' : '' " @click="form.pass='1'">{{ type == 0? '纳入监测': '解除风险'}}<img src="./components/img/check-icon.png" alt=""></div>
|
||||
<div class="check-item" :class="form.pass == '0' ? 'check-active' : '' " @click="form.pass='0'">驳回申请<img src="./components/img/check-icon.png" alt=""></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div><span style="display: inline-block;width: 6px;"></span>备注说明</div>
|
||||
<div>
|
||||
<u-input v-model="form.opinion" type="textarea" placeholder="请输入备注说明" height="200" :maxlength="500"></u-input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div><span style="width: 8px;"></span>图片<span style="color: #999;">(最多9张)</span></div>
|
||||
<div style="margin-top: 20px; box-sizing: border-box;">
|
||||
<AiUploader :def.sync="files" multiple placeholder="上传图片" :limit="9" action="/admin/file/add2"></AiUploader>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="btn" @click="submit">提交</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "MonitorRemoveView",
|
||||
// 网格长审核
|
||||
data() {
|
||||
return {
|
||||
info: {},
|
||||
id: '',
|
||||
pass: '',
|
||||
status: '',
|
||||
form: {
|
||||
pass: '',
|
||||
opinion: '',
|
||||
files: [],
|
||||
},
|
||||
files: [],
|
||||
type: '',
|
||||
}
|
||||
},
|
||||
onLoad(o) {
|
||||
this.$dict.load('fpRiskType','fpRiskEliminationMethod')
|
||||
this.pass = o.pass;
|
||||
this.id = o.id;
|
||||
this.status = o.status;
|
||||
this.form.pass = this.pass;
|
||||
this.type = o.type
|
||||
},
|
||||
created() {
|
||||
this.getInfo()
|
||||
document.title = this.type == 0? '纳入监测审核': '解除风险审核'
|
||||
},
|
||||
methods: {
|
||||
getInfo() {
|
||||
this.$http.post(`/app/apppreventionreturntopoverty/popup?id=${this.id}`).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.info = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
prevImg(urls, img) {
|
||||
const imgs = urls.map(v => v.url)
|
||||
uni.previewImage({
|
||||
urls: imgs,
|
||||
current: img
|
||||
})
|
||||
},
|
||||
|
||||
submit() {
|
||||
var url = ''
|
||||
var params = {
|
||||
...this.form,
|
||||
id: this.id,
|
||||
}
|
||||
if (this.type == 0) { // 纳入审核
|
||||
url = `/app/apppreventionreturntopoverty/examine`
|
||||
} else if (this.type == 1){ // 解除审核
|
||||
url = `/app/apppreventionreturntopoverty/relieve`
|
||||
}
|
||||
|
||||
var formData = new FormData()
|
||||
for (let key in params) {
|
||||
formData.append(key, params[key])
|
||||
}
|
||||
|
||||
this.$http.post(url,formData).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.$u.toast('提交成功')
|
||||
uni.$emit('reload')
|
||||
setTimeout(() =>{
|
||||
uni.navigateBack({
|
||||
delta: 2
|
||||
})
|
||||
},600)
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.MonitorRemoveView {
|
||||
.user-info {
|
||||
background: #FFF;
|
||||
.title {
|
||||
padding: 30px 32px;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid #DDDDDD;
|
||||
font-weight: 600;
|
||||
}
|
||||
.info {
|
||||
padding: 30px 32px;
|
||||
box-sizing: border-box;
|
||||
.item {
|
||||
display: flex;
|
||||
span {
|
||||
padding: 12px 0;
|
||||
}
|
||||
span:first-child {
|
||||
width: 140px;
|
||||
color: #999999;
|
||||
text-align: right;
|
||||
}
|
||||
span:last-child {
|
||||
color: #343D65;
|
||||
}
|
||||
.imgs {
|
||||
image {
|
||||
width: 136px;
|
||||
height: 136px;
|
||||
margin-right: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.result {
|
||||
margin-top: 16px;
|
||||
padding-bottom: 112px;
|
||||
box-sizing: border-box;
|
||||
.title {
|
||||
height: 112px;
|
||||
padding: 30px 32px;
|
||||
font-weight: 600;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid #DDDDDD;
|
||||
background: #FFF;
|
||||
}
|
||||
.check {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #DDDDDD;
|
||||
padding: 30px 32px;
|
||||
box-sizing: border-box;
|
||||
background: #FFF;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #DDDDDD;
|
||||
.check-item{
|
||||
display: inline-block;
|
||||
width: 140px;
|
||||
height: 64px;
|
||||
line-height: 64px;
|
||||
text-align: center;
|
||||
background: #F5F5F5;
|
||||
border-radius: 4px;
|
||||
font-size: 30px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
position: relative;
|
||||
img{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.check-item:nth-of-type(1) {
|
||||
margin-right: 36px;
|
||||
}
|
||||
.check-active{
|
||||
background: #E7F1FE;
|
||||
color: #1174FE;
|
||||
img{
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.item {
|
||||
border-bottom: 1px solid #DDDDDD;
|
||||
padding: 30px 32px;
|
||||
background: #FFF;
|
||||
}
|
||||
::v-deep .ai-uploader .fileList .default {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
width: 100%;
|
||||
height: 112px;
|
||||
line-height: 112px;
|
||||
text-align: center;
|
||||
background: #3192F4;
|
||||
color: #FFFFFF;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 258 B |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 272 B |
BIN
src/project/grid/AppMonitoringObject/components/img/user-img.png
Normal file
BIN
src/project/grid/AppMonitoringObject/components/img/user-img.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
347
src/project/grid/AppMonitoringObject/familyRisk.vue
Normal file
347
src/project/grid/AppMonitoringObject/familyRisk.vue
Normal file
@@ -0,0 +1,347 @@
|
||||
<template>
|
||||
<div class="familyRisk">
|
||||
<div class="form-group">
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i>*</i>
|
||||
<span>监测对象类型</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<AiSelect dict="fpType" v-model="form.objectType"></AiSelect>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i style="margin-right: 8px;"></i>
|
||||
<span>脱贫年度</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<AiSelect dict="fpYear" v-model="form.povertyYear"></AiSelect>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group" style="margin-top: 8px;">
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i>*</i>
|
||||
<span>风险因素</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<AiSelect dict="fpRiskType" v-model="form.riskType"></AiSelect>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i style="margin-right: 8px;"></i>
|
||||
<span>因自然灾害事项</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<AiSelect dict="fpNaturalDisaster" v-model="form.naturalDisasterType"></AiSelect>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group" style="margin-top: 8px;">
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i>*</i>
|
||||
<span>是否军烈属</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="check-item" :class="form.militaryMartyrs == '01' ? 'check-active' : '' " @click="form.militaryMartyrs='01'">是<img src="./components/img/check-icon.png" alt=""></div>
|
||||
<div class="check-item" :class="form.militaryMartyrs == '02' ? 'check-active' : '' " @click="form.militaryMartyrs='02'">否<img src="./components/img/check-icon.png" alt=""></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i>*</i>
|
||||
<span>是否义务阶段失学辍学</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="check-item" :class="form.dropOutOfSchool == '01' ? 'check-active' : '' " @click="form.dropOutOfSchool='01'">是<img src="./components/img/check-icon.png" alt=""></div>
|
||||
<div class="check-item" :class="form.dropOutOfSchool == '02' ? 'check-active' : '' " @click="form.dropOutOfSchool='02'">否<img src="./components/img/check-icon.png" alt=""></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrappers">
|
||||
<div class="top">
|
||||
<i style="margin-right: 8px;"></i>
|
||||
<span>义务阶段未上学原因</span>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<u-input v-model="form.dropOutOfSchoolReason" placeholder="请输入" placeholder-style="font-size: 15px;" :height="200" type="textarea" maxlength="500" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="btn" @click="submit">保存</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'familyRisk',
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
objectType: '',
|
||||
povertyYear: '',
|
||||
riskType: '',
|
||||
naturalDisasterType: '',
|
||||
militaryMartyrs: '',
|
||||
dropOutOfSchool: '',
|
||||
dropOutOfSchoolReason: '',
|
||||
},
|
||||
value: '',
|
||||
}
|
||||
},
|
||||
onLoad(query) {
|
||||
this.$dict.load('fpYear','fpType','fpRiskType','fpNaturalDisaster').then(()=>{
|
||||
this.getInfo(query.id)
|
||||
})
|
||||
this.id = query.id
|
||||
this.girdId = query.girdId
|
||||
this.girdName = query.girdName
|
||||
},
|
||||
onShow() {
|
||||
document.title = '家庭风险情况'
|
||||
},
|
||||
methods: {
|
||||
getInfo(id) {
|
||||
this.$http.post(`/app/apppreventionreturntopoverty/queryDetailById?id=${id}`).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.form = {
|
||||
...this.form,
|
||||
...res.data
|
||||
}
|
||||
}
|
||||
uni.hideLoading()
|
||||
})
|
||||
},
|
||||
|
||||
submit() {
|
||||
if (!this.form.objectType) {
|
||||
return this.$u.toast('请选择监测对象类型')
|
||||
}
|
||||
if (!this.form.riskType) {
|
||||
return this.$u.toast('请选择风险因素')
|
||||
}
|
||||
if (!this.form.militaryMartyrs) {
|
||||
return this.$u.toast('是否军烈属')
|
||||
}
|
||||
if (!this.form.dropOutOfSchool) {
|
||||
return this.$u.toast('是否义务阶段失学辍学')
|
||||
}
|
||||
|
||||
this.form.girdId = this.girdId
|
||||
this.form.girdName = this.girdName
|
||||
this.$http.post('/app/apppreventionreturntopoverty/addByEwechat', {
|
||||
...this.form,
|
||||
id: this.id
|
||||
}).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.$u.toast('保存成功')
|
||||
uni.$emit('reload')
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.familyRisk {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 120px;
|
||||
.form-group {
|
||||
background: #fff;
|
||||
p {
|
||||
color: #333333;
|
||||
font-size: 36px;
|
||||
padding: 20px 32px;
|
||||
// border-bottom: 1px solid #E4E5E6;
|
||||
font-weight: 600;
|
||||
}
|
||||
.form-item {
|
||||
padding: 0 32px;
|
||||
|
||||
::v-deep .AiSelect .display {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.form-item__wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 112px;
|
||||
border-bottom: 1px solid #E4E5E6;
|
||||
|
||||
.left {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.right {
|
||||
width: calc(100% - 300px);
|
||||
text-align: right !important;
|
||||
::v-deep .u-input .u-input__input .uni-input-wrapper {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 30px;
|
||||
color: #999999;
|
||||
}
|
||||
.check-item{
|
||||
display: inline-block;
|
||||
width: 160px;
|
||||
height: 64px;
|
||||
line-height: 64px;
|
||||
text-align: center;
|
||||
background: #F5F5F5;
|
||||
border-radius: 4px;
|
||||
font-size: 30px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
position: relative;
|
||||
img{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.check-item:nth-of-type(1) {
|
||||
margin-right: 36px;
|
||||
}
|
||||
.check-active{
|
||||
background: #E7F1FE;
|
||||
color: #1174FE;
|
||||
img{
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
height: 100%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
color: #333333;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
i {
|
||||
margin-right: 4px;
|
||||
font-style: normal;
|
||||
color: #FF4466;
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.form-item__wrapper {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.form-item__wrappers {
|
||||
font-size: 32px;
|
||||
.top {
|
||||
padding: 20px 0;
|
||||
}
|
||||
.bottom {
|
||||
padding: 5px 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-item__imgs {
|
||||
padding: 32px;
|
||||
|
||||
.form-item__title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 34px;
|
||||
|
||||
h2 {
|
||||
color: #333333;
|
||||
font-weight: normal;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
i {
|
||||
color: #999999;
|
||||
font-size: 28px;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.form-type {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 112px;
|
||||
padding: 0 32px;
|
||||
|
||||
h2 {
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #999999;
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 11;
|
||||
width: 100%;
|
||||
height: 112px;
|
||||
line-height: 112px;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
font-size: 32px;
|
||||
background: #3192F4;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
282
src/project/grid/AppMonitoringObject/residentDetail.vue
Normal file
282
src/project/grid/AppMonitoringObject/residentDetail.vue
Normal file
@@ -0,0 +1,282 @@
|
||||
<template>
|
||||
<div class="residentDetail">
|
||||
<div class="item-wrapper">
|
||||
<div class="item-header item-avatar">
|
||||
<div class="left">
|
||||
<!-- <img :src="info.photo" alt="" v-if="info.photo" /> -->
|
||||
<img :src="$cdn + 'avatar.png'" />
|
||||
<div class="left-right">
|
||||
<h2>{{ info.name }}</h2>
|
||||
<p>{{ info.phone }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<span>{{ $dict.getLabel('fpRelationship',info.householdRelation) }}</span>
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<label>现住地址</label>
|
||||
<span>{{ info.countyName + info.townName + info.villageName }}</span>
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<label>详细地址</label>
|
||||
<span>{{ info.currentAddress }}</span>
|
||||
</div>
|
||||
<div class="more-info">
|
||||
<div class="item-info">
|
||||
<label>身份证号</label>
|
||||
<span>{{ info.idNumber }}</span>
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<label>性别</label>
|
||||
<span>{{ $dict.getLabel('sex', info.sex) }}</span>
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<label>出生日期</label>
|
||||
<span>{{ info.birthDate }}</span>
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<label>民族</label>
|
||||
<span>{{ $dict.getLabel('fpNation', info.nation) }}</span>
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<label>政治面貌</label>
|
||||
<span>{{ $dict.getLabel('fpPoliticalOutlook', info.politicsStatus) }}</span>
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<label>文化程度</label>
|
||||
<span>{{ $dict.getLabel('fpEducation', info.education) }}</span>
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<label>在校生情况</label>
|
||||
<span>{{ $dict.getLabel('fpStudentsInSchool', info.schoolStatus) }}</span>
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<label>健康状况</label>
|
||||
<span>
|
||||
<span v-for="(item, index) in healthyStatusList" :key="index"><span v-if="index > 0">,</span>{{$dict.getLabel("fpHealth", item)}}</span>
|
||||
</span>
|
||||
|
||||
<!-- <span v-for="(item,index) in">{{ $dict.getLabel('fpHealth', info.healthyStatus) }}</span> -->
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<label>残疾类别</label>
|
||||
<span>{{ $dict.getLabel('fpDisabilityType', info.disabilityType) }}</span>
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<label>残疾证办证年度</label>
|
||||
<span>{{ $dict.getLabel('fpYear', info.disabilityCertificateYear) }}</span>
|
||||
</div>
|
||||
<!-- 基础保障 -->
|
||||
<h4 style="fon-size: 17px;font-weight: 600;margin-top: 8px;">基础保障</h4>
|
||||
<div class="item-info">
|
||||
<label>是否参加城乡居民基本医保</label>
|
||||
<span>{{ $dict.getLabel('fpYesOrNo', info.jcbxCxyiliao) }}</span>
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<label>是否参加城镇职工基本医保</label>
|
||||
<span>{{ $dict.getLabel('fpYesOrNo', info.jcbxCzyiliao) }}</span>
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<label>是否参加大病保险</label>
|
||||
<span>{{ $dict.getLabel('fpYesOrNo', info.jcbxDabing) }}</span>
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<label>是否参加商业补充医保</label>
|
||||
<span>{{ $dict.getLabel('fpYesOrNo', info.jcbxShangye) }}</span>
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<label>是否参加城乡居民养老保险</label>
|
||||
<span>{{ $dict.getLabel('fpYesOrNo', info.jcbxCxyanglao) }}</span>
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<label>是否参加城镇职工养老保险</label>
|
||||
<span>{{ $dict.getLabel('fpYesOrNo', info.jcbxCzyanglao) }}</span>
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<label>享受人身意外保险</label>
|
||||
<span>{{ $dict.getLabel('fpYesOrNo', info.jcbxRenshenyiwai) }}</span>
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<label>享受最低生活保障</label>
|
||||
<span>{{ $dict.getLabel('fpYesOrNo', info.bzcsNongcundibao) }}</span>
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<label>是否特困供养</label>
|
||||
<span>{{ $dict.getLabel('fpYesOrNo', info.bzcsTekungongyang) }}</span>
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<label>分散转集中供养</label>
|
||||
<span>{{ $dict.getLabel('fpYesOrNo', info.bzcsWubaohu) }}</span>
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<label>是否接受医疗救助</label>
|
||||
<span>{{ $dict.getLabel('fpYesOrNo', info.bzcsYiliaojiuzhu) }}</span>
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<label>是否接受其他健康扶助</label>
|
||||
<span>{{ $dict.getLabel('fpYesOrNo', info.bzcsQita) }}</span>
|
||||
</div>
|
||||
<!-- 务工就业 -->
|
||||
<h4 style="fon-size: 17px;font-weight: 600;margin-top: 8px;">务工就业</h4>
|
||||
<div class="item-info">
|
||||
<label>劳动技能</label>
|
||||
<span>{{ $dict.getLabel('fpLaborSkills', info.labourStatus) }}</span>
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<label>是否会讲普通话</label>
|
||||
<span>{{ $dict.getLabel('fpYesOrNo', info.mandarin) }}</span>
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<label>就业渠道</label>
|
||||
<span>{{ $dict.getLabel('fpEmploymentChannels', info.employmentChannels) }}</span>
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<label>务工企业名称</label>
|
||||
<span>{{ info.migrantEnterprises }}</span>
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<label>务工时间/月</label>
|
||||
<span>{{ info.workeMonths }}</span>
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<label>公益性岗位</label>
|
||||
<span>{{ info.publicWelfarePosts }}</span>
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<label>公益性岗位(月数)</label>
|
||||
<span>{{ info.publicWelfarePostsMonths }}</span>
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<label>是否国外务工</label>
|
||||
<span>{{ $dict.getLabel('fpYesOrNo',info.foreignWorkers) }}</span>
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<label>务工所在地</label>
|
||||
<span>{{ info.foreignWorkersAddress }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="btn" @click="toAdd" v-if="$permissions('app_apppreventionreturntopoverty_edit')">编辑</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'residentDetail',
|
||||
data() {
|
||||
return {
|
||||
id: '',
|
||||
info: {},
|
||||
healthyStatusList: []
|
||||
}
|
||||
},
|
||||
onLoad(o) {
|
||||
this.$dict.load('fpRelationship','sex','fpNation','fpPoliticalOutlook','fpYear','fpLaborSkills','fpEmploymentChannels')
|
||||
this.id = o.id,
|
||||
this.getInfo()
|
||||
uni.$on('reload',()=>{
|
||||
this.getInfo()
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
getInfo() {
|
||||
this.$http.post(`/app/apppreventionreturntopoverty/queryDetailById?id=${this.id}`).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.info = res.data
|
||||
this.healthyStatusList = res.data.healthyStatus.split(',')
|
||||
|
||||
}
|
||||
})
|
||||
},
|
||||
toAdd() {
|
||||
uni.navigateTo({url: `./Add?id=${this.id}`})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.residentDetail {
|
||||
.item-wrapper {
|
||||
background: #fff;
|
||||
margin-bottom: 16px;
|
||||
padding: 0 32px 130px;
|
||||
|
||||
.item-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 96px;
|
||||
|
||||
& > span {
|
||||
color: #3975C6;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
h2 {
|
||||
color: #333333;
|
||||
font-size: 32px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
i {
|
||||
font-style: normal;
|
||||
color: #2EA222;
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 14px 0;
|
||||
|
||||
label {
|
||||
color: #999999;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
span {
|
||||
max-width: 496px;
|
||||
text-align: right;
|
||||
color: #333333;
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.item-avatar {
|
||||
height: 192px;
|
||||
|
||||
img {
|
||||
width: 112px;
|
||||
height: 112px;
|
||||
margin-right: 24px;
|
||||
}
|
||||
|
||||
.left-right {
|
||||
p {
|
||||
margin-top: 8px;
|
||||
color: #999999;
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 112px;
|
||||
line-height: 112px;
|
||||
text-align: center;
|
||||
background: #3192F4;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
82
src/project/grid/AppMonitoringObject/serviceResult.vue
Normal file
82
src/project/grid/AppMonitoringObject/serviceResult.vue
Normal file
@@ -0,0 +1,82 @@
|
||||
<template>
|
||||
<div class="service-result">
|
||||
<image src="./components/img/service-success.png" />
|
||||
<h2> 申请成功，请等待管理员审批！</h2>
|
||||
<!-- <div class="text">
|
||||
<span>可在</span>
|
||||
<i>我的-进度查询</i>
|
||||
<span>中查看</span>
|
||||
</div> -->
|
||||
<div class="service-btn" hover-class="text-hover" @click="back">确定</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
onLoad (query) {
|
||||
uni.setNavigationBarTitle({
|
||||
title: query.title
|
||||
})
|
||||
},
|
||||
|
||||
methods: {
|
||||
back () {
|
||||
uni.navigateBack({
|
||||
delta: 2
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.service-result {
|
||||
min-height: 100vh;
|
||||
padding-top: 96rpx;
|
||||
text-align: center;
|
||||
background: #fff;
|
||||
|
||||
.service-btn {
|
||||
width: 558rpx;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
margin: 120rpx auto 0;
|
||||
text-align: center;
|
||||
background: #197DF0;
|
||||
font-size: 36rpx;
|
||||
color: #fff;
|
||||
box-shadow: 0px 8rpx 16rpx 0px rgba(0, 0, 0, 0.02);
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 32rpx;
|
||||
color: #333333;
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
|
||||
i {
|
||||
color: #467DFE;
|
||||
}
|
||||
}
|
||||
|
||||
image {
|
||||
width: 192rpx;
|
||||
height: 192rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
501
src/project/grid/AppSpecialPeople/AppSpecialPeople.vue
Normal file
501
src/project/grid/AppSpecialPeople/AppSpecialPeople.vue
Normal file
@@ -0,0 +1,501 @@
|
||||
<template>
|
||||
<div class="AppSpecialPeople">
|
||||
<template v-if="hasGridPermit">
|
||||
<div class="tab-select">
|
||||
<div class="item" :class="tabIndex == index ? 'active' : ''" v-for="(item, index) in tabs" :key="index"
|
||||
@click="tabClick(index)">{{ item }}<span></span></div>
|
||||
</div>
|
||||
<div class="area-select">
|
||||
<div class="select-content">
|
||||
<div class="area-content fill">
|
||||
<AiPagePicker type="gird" isMyGird @select="handleGridSelect">
|
||||
<AiMore v-model="gridName" placeholder="选择网格"/>
|
||||
</AiPagePicker>
|
||||
<!-- <AiAreaPicker :areaId="user.areaId" v-model="areaId" @select="areaSelect" :name.sync="areaName">-->
|
||||
<!-- <img src="./img/local-icon.png" alt=""/>-->
|
||||
<!-- <span class="label" v-if="areaName">{{ areaName }}</span>-->
|
||||
<!-- <span v-else>请选择</span>-->
|
||||
<!-- <u-icon name="arrow-down" color="#666" size="24"/>-->
|
||||
<!-- </AiAreaPicker>-->
|
||||
</div>
|
||||
<div class="search-input" v-if="tabIndex">
|
||||
<img src="./img/search-icon.png" alt=""/>
|
||||
<u-input type="text" placeholder="请输入姓名" placeholder-style="color:#999;font-size:13px;" height="18"
|
||||
v-model="search.name" @confirm="getUserList" :clearable="false" maxlength="6"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!tabIndex">
|
||||
<div class="info-content">
|
||||
<div class="title">特殊人群</div>
|
||||
<div class="num-content">
|
||||
<div class="num-item" v-for="(item, index) in statisticsList" :key="index">
|
||||
<h3 v-text="item.value"/>
|
||||
<p v-text="item.label"/>
|
||||
</div>
|
||||
<AiEmpty v-if="!statisticsList.length"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-content">
|
||||
<div class="title">本月新增</div>
|
||||
<div class="num-content color-org">
|
||||
<div class="num-item" v-for="(item, index) in statisticsListMon" :key="index">
|
||||
<h3>{{ item.value }}</h3>
|
||||
<p>{{ item.label }}</p>
|
||||
</div>
|
||||
<AiEmpty v-if="!statisticsListMon.length"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="item-content" v-for="(item, index) in userList" :key="index">
|
||||
<div class="title" @click="showUserType(index)">
|
||||
<h2>{{ item.label }}</h2>
|
||||
<img src="./img/down-icon.png" alt="" :class="item.check ? 'img-active' : ''"/>
|
||||
</div>
|
||||
<div class="user-list" v-if="item.check">
|
||||
<div class="user-item" v-for="(e, indexs) in item.value" :key="indexs" @click="showDetail(e)">
|
||||
<div class="user-img">
|
||||
<img src="./img/user-img.png" alt=""/>
|
||||
</div>
|
||||
<div class="user-info">
|
||||
<p class="name">{{ e.name }}
|
||||
<span class="btn-icon" v-if="isAdmin || user.id == e.create_user_id">
|
||||
<img src="./img/edit-icon.png" alt="" @click.stop="toEdit(e,item.dictValue)">
|
||||
<img src="./img/del-icon.png" alt="" @click.stop="del(e,item.dictValue)">
|
||||
</span>
|
||||
</p>
|
||||
<div class="phone">
|
||||
<span>{{ idNumberInit(e.idNumber) }}</span>
|
||||
<span>{{ e.phone }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text" v-if="!item.value.length">{{ '暂无' + item.label + '信息' }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer" @click="toAdd">
|
||||
<div class="btn">新增特殊人群信息</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<AiEmpty description="没有网格员权限<br>无法查看特殊人员信息~" v-else/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState} from "vuex";
|
||||
|
||||
export default {
|
||||
name: 'AppSpecialPeople',
|
||||
appName: '特殊人群',
|
||||
data() {
|
||||
return {
|
||||
areaName: '',
|
||||
tabs: ['统计信息', '人员信息'],
|
||||
tabIndex: 0,
|
||||
addressArea: '',
|
||||
statisticsList: [],
|
||||
statisticsListMon: [],
|
||||
userList: [],
|
||||
gridName: "",
|
||||
search: {name: ''}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
hasGridPermit() {
|
||||
return this.user.girdCheckType != 0
|
||||
},
|
||||
isAdmin() {
|
||||
return this.user.girdCheckType == 2
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.$dict.load('appSpecialTypeFive')
|
||||
},
|
||||
onShow() {
|
||||
document.title = '特殊人群管理'
|
||||
if (this.hasGridPermit) {
|
||||
if (!this.search.girdId) {
|
||||
this.search.girdId = this.user.girdId
|
||||
this.gridName = this.user.girdName
|
||||
}
|
||||
this.getDatas()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getDatas() {
|
||||
this.getStatistic()
|
||||
this.getStatisticMon()
|
||||
this.getUserList()
|
||||
this.$forceUpdate()
|
||||
},
|
||||
handleGridSelect(e) {
|
||||
this.gridName = e?.[0]?.girdName
|
||||
this.search.girdId = e?.[0]?.id
|
||||
this.getDatas()
|
||||
},
|
||||
areaSelect(e) {
|
||||
this.search.areaId = e
|
||||
this.getDatas()
|
||||
},
|
||||
tabClick(index) {
|
||||
this.tabIndex = index
|
||||
},
|
||||
getStatistic() {
|
||||
this.statisticsList = []
|
||||
this.$http.post(`/app/appapplicationinfo/specialStatistic`, null, {
|
||||
params: {...this.search, type: 0, range: 0}
|
||||
}).then((res) => {
|
||||
if (res?.data) {
|
||||
for (let i in res.data) {
|
||||
let obj = {
|
||||
label: i,
|
||||
value: res.data[i],
|
||||
}
|
||||
this.statisticsList.push(obj)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
getStatisticMon() {
|
||||
this.statisticsListMon = []
|
||||
this.$http.post(`/app/appapplicationinfo/specialStatistic`, null, {
|
||||
params: {...this.search, type: 0, range: 1}
|
||||
}).then((res) => {
|
||||
if (res?.data) {
|
||||
for (let i in res.data) {
|
||||
let obj = {
|
||||
label: i,
|
||||
value: res.data[i],
|
||||
}
|
||||
this.statisticsListMon.push(obj)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
getUserList() {
|
||||
this.userList = []
|
||||
this.$http.post(`/app/appapplicationinfo/queryPeople`, null, {
|
||||
params: {...this.search, type: 0, status: 1}
|
||||
}).then((res) => {
|
||||
if (res?.data) {
|
||||
this.userList = Object.keys(res.data).map(e => ({
|
||||
label: e,
|
||||
value: res.data[e],
|
||||
check: false,
|
||||
}))
|
||||
}
|
||||
})
|
||||
},
|
||||
toAdd() {
|
||||
uni.navigateTo({url: './add'})
|
||||
},
|
||||
idNumberInit(idNumber) {
|
||||
if (!idNumber) {
|
||||
idNumber = ''
|
||||
} else {
|
||||
idNumber = idNumber.substring(0, 5) + '******' + idNumber.substring(12, 15)
|
||||
}
|
||||
return idNumber
|
||||
},
|
||||
showUserType(index) {
|
||||
if (this.userList[index].check) {
|
||||
this.userList[index].check = false
|
||||
} else {
|
||||
this.userList.map((item) => {
|
||||
item.check = false
|
||||
})
|
||||
this.userList[index].check = true
|
||||
}
|
||||
},
|
||||
toEdit(row) {
|
||||
uni.navigateTo({
|
||||
url: `./add?id=${row.id}&appId=${row.appId}`
|
||||
})
|
||||
},
|
||||
del(row) {
|
||||
this.$confirm('确定删除该数据?').then(() => {
|
||||
uni.showLoading({})
|
||||
let {id: ids, appId} = row
|
||||
this.$http.post("/app/appapplicationinfo/delete", null, {
|
||||
params: {ids, appId}
|
||||
}).then((res) => {
|
||||
if (res?.code == 0) {
|
||||
this.$u.toast('删除成功！')
|
||||
this.getUserList()
|
||||
}
|
||||
uni.hideLoading()
|
||||
})
|
||||
}).catch(() => {
|
||||
})
|
||||
},
|
||||
showDetail(e) {
|
||||
uni.navigateTo({url: `/apps/AppPeopleList/DetailCard?id=${e.resident_id}`})
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.AppSpecialPeople {
|
||||
min-height: 100%;
|
||||
|
||||
.tab-select {
|
||||
width: 100%;
|
||||
height: 96px;
|
||||
line-height: 96px;
|
||||
background: #3975c6;
|
||||
display: flex;
|
||||
|
||||
.item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 28px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #cddcf0;
|
||||
}
|
||||
|
||||
.active {
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
position: relative;
|
||||
color: #fff;
|
||||
|
||||
span {
|
||||
width: 48px;
|
||||
height: 4px;
|
||||
background: #fff;
|
||||
position: absolute;
|
||||
bottom: 14px;
|
||||
left: 50%;
|
||||
margin-left: -24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.area-select {
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
padding-left: 32px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.select-content {
|
||||
width: 100%;
|
||||
padding: 24px 32px 24px 0;
|
||||
border-bottom: 1px solid #d8dde6;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #333;
|
||||
line-height: 44px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.area-content {
|
||||
line-height: 64px;
|
||||
|
||||
img {
|
||||
width: 42px;
|
||||
vertical-align: middle;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.u-icon {
|
||||
margin-left: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 402px;
|
||||
height: 64px;
|
||||
background: #f5f5f5;
|
||||
border-radius: 32px;
|
||||
padding: 14px 32px 14px 64px;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
|
||||
img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-right: 12px;
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
left: 24px;
|
||||
}
|
||||
|
||||
::v-deep .u-input {
|
||||
display: inline-block;
|
||||
width: 240px;
|
||||
font-size: 26px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info-content {
|
||||
width: calc(100% - 64px);
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
margin: 24px 32px 0;
|
||||
|
||||
.title {
|
||||
padding-left: 32px;
|
||||
line-height: 94px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
font-size: 32px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.num-content {
|
||||
overflow: hidden;
|
||||
|
||||
.num-item {
|
||||
float: left;
|
||||
width: 33%;
|
||||
padding: 40px 0;
|
||||
text-align: center;
|
||||
|
||||
h3 {
|
||||
font-size: 64px;
|
||||
font-family: DINAlternate-Bold, DINAlternate;
|
||||
font-weight: bold;
|
||||
color: #3192f4;
|
||||
line-height: 74px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 28px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #999;
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.color-org {
|
||||
.num-item {
|
||||
h3 {
|
||||
color: #ff8700;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-content {
|
||||
margin-bottom: 4px;
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
height: 108px;
|
||||
line-height: 108px;
|
||||
background: #fff;
|
||||
padding: 0 32px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
h2 {
|
||||
font-size: 32px;
|
||||
font-family: PingFangSC-Semibold, PingFang SC;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
margin-top: 38px;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.img-active {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
.user-list {
|
||||
background-color: #fff;
|
||||
|
||||
.user-item {
|
||||
padding: 24px 32px;
|
||||
display: flex;
|
||||
|
||||
.user-img {
|
||||
width: 112px;
|
||||
|
||||
img {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
.user-info {
|
||||
width: 100%;
|
||||
|
||||
.name {
|
||||
font-size: 32px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
line-height: 44px;
|
||||
margin-bottom: 8px;
|
||||
|
||||
.btn-icon {
|
||||
float: right;
|
||||
|
||||
img {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
margin-left: 20px;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.phone {
|
||||
width: 100%;
|
||||
font-size: 26px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #999;
|
||||
line-height: 36px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
height: 96px;
|
||||
line-height: 96px;
|
||||
color: #999;
|
||||
font-size: 28px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
height: 112px;
|
||||
line-height: 112px;
|
||||
text-align: center;
|
||||
background: #1365dd;
|
||||
font-size: 32px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
620
src/project/grid/AppSpecialPeople/add.vue
Normal file
620
src/project/grid/AppSpecialPeople/add.vue
Normal file
@@ -0,0 +1,620 @@
|
||||
<template>
|
||||
<div class="add">
|
||||
<div class="pad-l32">
|
||||
<div class="item" v-if="!isEdit">
|
||||
<span class="label"><span class="tips">*</span>类型</span>
|
||||
<div class="value" @click="showType=true">
|
||||
<AiMore v-model="appName"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-content" v-for="(items, indexs) in formDataList" :key="indexs">
|
||||
<div v-for="(item, index) in items" :key="index">
|
||||
<!-- 初始化字段锁定 -->
|
||||
<div class="item" v-if="!!formData[item.isInit]&&item.isInit!=item.fieldDbName">
|
||||
<span class="label"><span class="tips">{{ item.mustFill == 1 ? '*' : '' }}</span>{{ item.fieldName }}</span>
|
||||
<div class="value" v-if="item.dict"
|
||||
v-text="toString($dict.getLabel(item.dict, formData[item.fieldDbName]))"/>
|
||||
<div class="value" v-else-if="item.type=='area'">
|
||||
<AiAreaPicker :value="formData[item.fieldDbName]" isForm disabled/>
|
||||
</div>
|
||||
<div class="value" v-else-if="item.type=='upload'">
|
||||
<template v-if="formData[item.fieldDbName]">
|
||||
<ai-image v-for="(op,i) in [formData[item.fieldDbName]].flat()" :key="i" :src="op" preview/>
|
||||
</template>
|
||||
<span v-else>-</span>
|
||||
</div>
|
||||
<div class="value" v-else v-text="toString(formData[item.fieldDbName])"/>
|
||||
</div>
|
||||
<!-- input输入框 -->
|
||||
<div class="item" v-else-if="item.type == 'input' || item.type == 'name' || item.type == 'phone'">
|
||||
<span class="label"><span class="tips">{{ item.mustFill == 1 ? '*' : '' }}</span>{{ item.fieldName }}</span>
|
||||
<div class="value">
|
||||
<u-input type="text" placeholder="请输入" input-align="right" placeholder-style="color:#999;font-size:16px;"
|
||||
height="48" v-model="formData[item.fieldDbName]" :maxlength="item.maxLength"/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- number 输入框 -->
|
||||
<div class="item" v-else-if="item.type == 'number'">
|
||||
<span class="label"><span class="tips">{{ item.mustFill == 1 ? '*' : '' }}</span>{{ item.fieldName }}</span>
|
||||
<div class="value">
|
||||
<u-input type="number" placeholder="请输入" input-align="right"
|
||||
placeholder-style="color:#999;font-size:16px;" height="48" v-model="formData[item.fieldDbName]"
|
||||
:maxlength="item.maxLength"/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 身份证输入框 -->
|
||||
<div class="item" v-else-if="item.type == 'idNumber'">
|
||||
<span class="label"><span class="tips">{{ item.mustFill == 1 ? '*' : '' }}</span>{{ item.fieldName }}</span>
|
||||
<div class="value">
|
||||
<u-input type="idcard" placeholder="请输入" input-align="right"
|
||||
placeholder-style="color:#999;font-size:16px;" height="48" v-model="formData[item.fieldDbName]"
|
||||
:maxlength="item.maxLength"/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- textarea输入框 富文本-->
|
||||
<div class="textarea" v-else-if="item.type == 'textarea' || item.type == 'text' || item.type == 'rtf'">
|
||||
<span class="label"><span class="tips">{{ item.mustFill == 1 ? '*' : '' }}</span>{{ item.fieldName }}</span>
|
||||
<div class="value">
|
||||
<u-input type="textarea" placeholder="请输入请输入" placeholder-style="color:#999;font-size:16px;" height="200"
|
||||
v-model="formData[item.fieldDbName]" :maxlength="item.maxLength"/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 字典下拉选择 -->
|
||||
<div class="item" v-else-if="item.type == 'dict'">
|
||||
<span class="label"><span class="tips">{{ item.mustFill == 1 ? '*' : '' }}</span>{{ item.fieldName }}</span>
|
||||
<div class="value" @click="selectClick(item.fieldDbName, item.dict)">
|
||||
<AiMore :value="$dict.getLabel(item.dict, formData[item.fieldDbName])"/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 单选radio -->
|
||||
<div class="item" v-else-if="item.type == 'radio'">
|
||||
<span class="label"><span class="tips">{{ item.mustFill == 1 ? '*' : '' }}</span>{{ item.fieldName }}</span>
|
||||
<div class="value">
|
||||
<u-radio-group v-model="formData[item.fieldDbName]">
|
||||
<u-radio :name="item.dictValue" v-for="(item, index) in $dict.getDict(item.dict)" :key="index">
|
||||
{{ item.dictName }}
|
||||
</u-radio>
|
||||
</u-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 开关onOff -->
|
||||
<div class="item" v-else-if="item.type == 'onOff'">
|
||||
<span class="label"><span class="tips">{{ item.mustFill == 1 ? '*' : '' }}</span>{{ item.fieldName }}</span>
|
||||
<div class="value">
|
||||
<u-switch v-model="formData[item.fieldDbName]" :active-value="1" :inactive-value="0"></u-switch>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 多选checkbox -->
|
||||
<div class="textarea" v-else-if="item.type == 'checkbox'">
|
||||
<span class="label"><span class="tips">{{ item.mustFill == 1 ? '*' : '' }}</span>{{ item.fieldName }}</span>
|
||||
<div class="value">
|
||||
<u-checkbox-group>
|
||||
<u-checkbox
|
||||
v-model="e.checked"
|
||||
v-for="(e, i) in item.checkList" :key="i"
|
||||
:name="item.dictValue"
|
||||
@change="checkboxChange(indexs, index, i)"
|
||||
>{{ e.dictName }}
|
||||
</u-checkbox>
|
||||
</u-checkbox-group>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 附件 -->
|
||||
<div class="textarea" v-else-if="item.type == 'upload'">
|
||||
<span class="label"><span class="tips">{{ item.mustFill == 1 ? '*' : '' }}</span>{{ item.fieldName }}</span>
|
||||
<div class="value">
|
||||
<AiUploader :multiple="true" type="image" :limit="9" placeholder="上传图片"
|
||||
:def.sync="formData[item.fieldDbName]"
|
||||
action="/admin/file/add2"/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 地区选择 -->
|
||||
<div class="item" v-else-if="item.type == 'area'">
|
||||
<span class="label"><span class="tips">{{ item.mustFill == 1 ? '*' : '' }}</span>{{ item.fieldName }}</span>
|
||||
<div class="value" flex>
|
||||
<AiAreaPicker @select="v=>formData[item.fieldDbName]=v" :name.sync="formData[item.fieldDbName+'_name']"
|
||||
all :value="formData[item.fieldDbName]" :valueLevel="item.areaPattern" isForm/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 人员选择 -->
|
||||
<div class="item" v-else-if="item.type == 'user'">
|
||||
<span class="label"><span class="tips">{{ item.mustFill == 1 ? '*' : '' }}</span>{{ item.fieldName }}</span>
|
||||
<div class="value" @click="handleSelectUser(item.fieldDbName)">
|
||||
<template v-if="!formData[item.fieldDbName].length">
|
||||
<span>请选择</span>
|
||||
</template>
|
||||
<template v-else>
|
||||
已选择<em>{{ formData[item.fieldDbName].map(e => e.name).slice(0, 2).join("、") }}</em>等<em>{{
|
||||
formData[item.fieldDbName].length
|
||||
}}</em>人
|
||||
</template>
|
||||
<u-icon name="arrow-right" color="#ddd"></u-icon>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 日期选择 / 日期带时分秒选择 / 时间-时分秒选择 -->
|
||||
<div class="item" v-else-if="item.type == 'date' || item.type == 'datetime' || item.type == 'time'">
|
||||
<span class="label"><span class="tips">{{ item.mustFill == 1 ? '*' : '' }}</span>{{ item.fieldName }}</span>
|
||||
<div class="value" @click="dateClick(indexs, index)" flex>
|
||||
<AiMore v-model="formData[item.fieldDbName]"/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 居民档案选择 -->
|
||||
<div class="item" v-else-if="item.type == 'resident'">
|
||||
<span class="label"><span class="tips">{{ item.mustFill == 1 ? '*' : '' }}</span>{{ item.fieldName }}</span>
|
||||
<div class="value" flex>
|
||||
<AiPagePicker @select="v=>handleSelectResident(v,item)" single>
|
||||
<AiMore v-model="formData[item.fieldDbName + '_name']" :placeholder="item.fieldTips"/>
|
||||
</AiPagePicker>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 网格选择 -->
|
||||
<div class="item" v-else-if="item.type == 'gird'">
|
||||
<span class="label"><span class="tips">{{ item.mustFill == 1 ? '*' : '' }}</span>{{ item.fieldName }}</span>
|
||||
<div class="value" flex>
|
||||
<AiPagePicker type="gird" @select="v=>handleSelectGird(v,item)" isMyGird>
|
||||
<AiMore v-model="formData[item.fieldDbName + '_name']" :placeholder="item.fieldTips"/>
|
||||
</AiPagePicker>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<u-picker mode="time" v-model="dateShow" :params="deteParams" @confirm="dateConfirm">请选择</u-picker>
|
||||
<u-select v-model="selectShow" mode="single-column" :list="selectList" label-name="dictName" value-name="dictValue"
|
||||
@confirm="selectConfirm"></u-select>
|
||||
<u-select v-model="showType" :list="typeList" label-name="applicationName" value-name="id"
|
||||
@confirm="typeConfirm"></u-select>
|
||||
<div class="footer" @click="submit" v-if="appId">
|
||||
<div class="btn">保存</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapActions, mapState} from 'vuex'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
appId: '',
|
||||
appName: '',
|
||||
showType: false,
|
||||
typeList: [],
|
||||
formDataList: [],
|
||||
formData: {},
|
||||
pageShow: false,
|
||||
dateShow: false,
|
||||
deteParams: {},
|
||||
datePropIndex: '', //时间选择 formDataList索引
|
||||
dateIndex: '', //时间选择 formDataList 数组里面的索引
|
||||
selectName: '',
|
||||
selectList: [],
|
||||
selectShow: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
isEdit() {
|
||||
return !!this.$route.query.id
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getType()
|
||||
},
|
||||
onShow() {
|
||||
if (this.isEdit) {
|
||||
document.title = "编辑人员"
|
||||
if (!this.appId) {
|
||||
let {appId: value} = this.$route.query
|
||||
this.typeConfirm([{value}]).then(() => this.getDetail())
|
||||
}
|
||||
} else {
|
||||
document.title = '新增人员'
|
||||
if (this.$route.query.appId && !this.appId) {
|
||||
let {appId: value, appName} = this.$route.query
|
||||
this.typeConfirm([{value, label: decodeURIComponent(appName)}])
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['selectEnterpriseContact']),
|
||||
handleSelectUser(fieldDbName) {
|
||||
this.selectEnterpriseContact({
|
||||
fromDepartmentId: 0,
|
||||
type: ["user"],
|
||||
selectedUserIds: this.form[fieldDbName]?.map(e => e.id)
|
||||
}).then(res => {
|
||||
this.form[fieldDbName] = res?.userList || []
|
||||
})
|
||||
},
|
||||
getType() {
|
||||
this.$http.post(`/app/appapplicationinfo/queryApplicationListByType`, null, {
|
||||
params: {type: 0, status: 1}
|
||||
}).then((res) => {
|
||||
if (res?.data) {
|
||||
this.typeList = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
typeConfirm(e) {
|
||||
this.appId = e[0].value
|
||||
this.appName = e[0].label
|
||||
return this.$http.post(`/app/appapplicationinfo/queryApplicationInfo?appId=${this.appId}`).then((res) => {
|
||||
if (res?.data) {
|
||||
this.formData = {}
|
||||
let data = res.data
|
||||
let dictList = []
|
||||
let formList = {}
|
||||
data.tableInfos.map((item) => {
|
||||
let colItem
|
||||
if (item.dictionaryCode) {
|
||||
dictList.push(item.dictionaryCode)
|
||||
}
|
||||
if (item.dictionaryCode && item.type != 'radio' && item.type != 'checkbox' && item.type != 'onOff') {
|
||||
colItem = {
|
||||
...item,
|
||||
type: 'dict',
|
||||
dict: item.dictionaryCode,
|
||||
fieldValue: item.defaultValue || ''
|
||||
}
|
||||
} else if (item.type == 'radio') {
|
||||
colItem = {
|
||||
...item,
|
||||
dict: item.dictionaryCode,
|
||||
fieldValue: item.defaultValue || ''
|
||||
}
|
||||
} else if (item.type == 'checkbox') {
|
||||
colItem = {
|
||||
...item,
|
||||
dict: item.dictionaryCode,
|
||||
fieldValue: ''
|
||||
}
|
||||
if (item.defaultValue) {
|
||||
colItem.fieldValue = item.defaultValue?.split('`')
|
||||
}
|
||||
|
||||
} else if (item.type == 'onOff') {
|
||||
colItem = {
|
||||
...item,
|
||||
fieldValue: 0
|
||||
}
|
||||
} else if (item.type == 'number') {
|
||||
colItem = {
|
||||
...item,
|
||||
type: item.type,
|
||||
min: item.minValue || '',
|
||||
max: item.maxValue || '',
|
||||
fieldValue: Number(item.defaultValue) || 0
|
||||
}
|
||||
} else if (item.type == 'upload' || item.type == 'user') {
|
||||
colItem = {
|
||||
...item,
|
||||
type: item.type,
|
||||
fieldValue: []
|
||||
}
|
||||
} else if (item.type == 'area') {
|
||||
colItem = {
|
||||
...item,
|
||||
type: item.type,
|
||||
fieldValue: "",
|
||||
}
|
||||
} else {
|
||||
if (item.type == 'date') {
|
||||
item.params = {year: true, month: true, day: true, hour: false, minute: false, second: false}
|
||||
}
|
||||
if (item.type == 'datetime') {
|
||||
item.params = {year: true, month: true, day: true, hour: true, minute: true, second: true}
|
||||
}
|
||||
if (item.type == 'time') {
|
||||
item.params = {year: false, month: false, day: false, hour: true, minute: true, second: true}
|
||||
}
|
||||
|
||||
colItem = {
|
||||
...item,
|
||||
type: item.type,
|
||||
}
|
||||
colItem.fieldValue = item.defaultValue || ''
|
||||
}
|
||||
formList[item.groupIndex]?.push(colItem) || (formList[item.groupIndex] = [colItem])
|
||||
this.$set(this.formData, colItem.fieldDbName, colItem.fieldValue || "")
|
||||
})
|
||||
this.formDataList = Object.values(formList)
|
||||
|
||||
if (dictList.length) {
|
||||
this.getDictList(dictList)
|
||||
} else {
|
||||
this.formDataList.map((item) => {
|
||||
item.map((e) => {
|
||||
if (e.type == 'onOff') { //开关
|
||||
this.formData[e.fieldDbName] = 0
|
||||
}
|
||||
if (e.type == 'area') { //地区
|
||||
this.formData[e.fieldDbName + '_name'] = this.user.areaName
|
||||
}
|
||||
})
|
||||
})
|
||||
this.$forceUpdate()
|
||||
this.pageShow = true
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
getDictList(listName) {
|
||||
this.$dict.load(listName.join(',')).then(() => {
|
||||
this.formDataList.map((item) => {
|
||||
item.map((e) => {
|
||||
if (e.type == 'checkbox') { //多选
|
||||
var list = this.$dict.getDict(e.dict)
|
||||
list.map((items) => {
|
||||
items.checked = false
|
||||
})
|
||||
e.checkList = list
|
||||
}
|
||||
if (e.type == 'onOff') { //开关
|
||||
this.formData[e.fieldDbName] = 0
|
||||
}
|
||||
if (e.type == 'area') { //地区
|
||||
this.formData[e.fieldDbName + '_name'] = this.user.areaName
|
||||
}
|
||||
})
|
||||
})
|
||||
this.$forceUpdate()
|
||||
this.pageShow = true
|
||||
})
|
||||
},
|
||||
selectClick(name, dictName) {
|
||||
this.selectName = name
|
||||
this.selectList = this.$dict.getDict(dictName)
|
||||
this.selectShow = true
|
||||
},
|
||||
selectConfirm(e) {
|
||||
this.formData[this.selectName] = e[0].value
|
||||
},
|
||||
checkboxChange(indexs, index, i) {
|
||||
this.formDataList[indexs][index].checkList[i].checked = !this.formDataList[indexs][index].checkList[i].checked
|
||||
this.$forceUpdate()
|
||||
},
|
||||
dateClick(indexs, index) {
|
||||
this.deteParams = this.formDataList[indexs][index].params
|
||||
this.datePropIndex = indexs
|
||||
this.dateIndex = index
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.dateShow = true
|
||||
})
|
||||
},
|
||||
dateConfirm(e) {
|
||||
var fieldDbName = this.formDataList[this.datePropIndex][this.dateIndex].fieldDbName
|
||||
if (this.formDataList[this.datePropIndex][this.dateIndex].type == 'date') { //年月日
|
||||
this.formData[fieldDbName] = `${e.year}-${e.month}-${e.day}`
|
||||
}
|
||||
if (this.formDataList[this.datePropIndex][this.dateIndex].type == 'datetime') { //年月日时分秒
|
||||
this.formData[fieldDbName] = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}:${e.second}`
|
||||
}
|
||||
if (this.formDataList[this.datePropIndex][this.dateIndex].type == 'time') { //时分秒
|
||||
this.formData[fieldDbName] = `${e.hour}:${e.minute}:${e.second}`
|
||||
}
|
||||
},
|
||||
submit() {
|
||||
let isValid = true, form = JSON.parse(JSON.stringify(this.formData))
|
||||
this.formDataList.map((item) => {
|
||||
item?.map((items) => {
|
||||
if (items.type == 'checkbox') { //多选
|
||||
form[items.fieldDbName] = ''
|
||||
let list = []
|
||||
items.checkList.map((e) => {
|
||||
if (e.checked) {
|
||||
list.push(e.dictValue)
|
||||
}
|
||||
})
|
||||
form[items.fieldDbName] = list?.toString()
|
||||
}
|
||||
if (items.type == 'upload') { //附件 只传id
|
||||
let files = [];
|
||||
[form[items.fieldDbName]]?.flat()?.map(item => item?.url&&files.push(item.url))
|
||||
form[items.fieldDbName] = files?.toString()
|
||||
}
|
||||
// if (items.type == 'onOff') { //开关
|
||||
// form[items.fieldDbName] = form[items.fieldDbName] ? '1' : '0'
|
||||
// }
|
||||
if (items.type == 'area' && form[items.fieldDbName]) {
|
||||
let area = []
|
||||
area.push(form[items.fieldDbName])
|
||||
area.push(form[items.fieldDbName + '_name'])
|
||||
form[items.fieldDbName] = area.join('_')
|
||||
}
|
||||
})
|
||||
})
|
||||
this.formDataList.some((item) => {
|
||||
return item.some((items) => {
|
||||
if (items.mustFill == 1 && !form[items.fieldDbName]) {
|
||||
isValid = false
|
||||
return this.$u.toast(`${items.fieldName}为必填项`)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
if (!isValid) return
|
||||
|
||||
this.$http.post(`/app/appapplicationinfo/addOrUpdate?appId=${this.appId}`, {
|
||||
...form
|
||||
}).then(res => {
|
||||
if (res?.code == 0) {
|
||||
this.$u.toast('提交成功')
|
||||
uni.navigateBack({
|
||||
success: () => {
|
||||
uni.$emit("selectType")
|
||||
}
|
||||
})
|
||||
} else this.$u.toast(res?.msg || "提交失败,请联系管理员")
|
||||
}).catch(err => {
|
||||
this.$u.toast(err || "提交失败,请联系管理员")
|
||||
})
|
||||
},
|
||||
handleSelectResident(resident, item) {
|
||||
let info = resident?.[0] || {}
|
||||
this.formData = {...this.formData, ...info}
|
||||
this.formData[item.fieldDbName] = info.id
|
||||
this.formData[item.fieldDbName + "_name"] = info.name
|
||||
this.$forceUpdate()
|
||||
},
|
||||
toString(obj) {
|
||||
return obj?.toString() || "-"
|
||||
},
|
||||
handleSelectGird(gird, item) {
|
||||
let info = gird?.[0] || {}
|
||||
this.formData[item.fieldDbName] = [info.id, info.girdName].join("_")
|
||||
this.formData[item.fieldDbName + "_name"] = info.girdName
|
||||
this.$forceUpdate()
|
||||
},
|
||||
getDetail() {
|
||||
let {id, appId} = this.$route.query
|
||||
return id ? this.$http.post("/app/appapplicationinfo/queryDetailById", null, {
|
||||
params: {id, appId}
|
||||
}).then(res => {
|
||||
if (res?.data) {
|
||||
this.formData = res.data
|
||||
this.$forceUpdate()
|
||||
}
|
||||
}) : Promise.resolve()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.add {
|
||||
padding-bottom: 112px;
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
height: 96px;
|
||||
line-height: 96px;
|
||||
background: #FFF;
|
||||
font-size: 32px;
|
||||
font-weight: 500;
|
||||
color: #262B36;
|
||||
padding-right: 32px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
|
||||
.tips {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 32px;
|
||||
background: #4E75FE;
|
||||
box-shadow: 0 8px 24px 2px #C9D8FA;
|
||||
border-radius: 4px;
|
||||
vertical-align: middle;
|
||||
margin-right: 22px;
|
||||
}
|
||||
|
||||
.select {
|
||||
float: right;
|
||||
font-size: 30px;
|
||||
color: #1365DD;
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 100%;
|
||||
padding: 34px 32px 34px 0;
|
||||
background: #FFFFFF;
|
||||
border-bottom: 1px solid #D8DDE6;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 32px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #333;
|
||||
line-height: 44px;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
|
||||
.value {
|
||||
.u-icon {
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
::v-deep .u-input {
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.color-999 {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.tips {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 44px;
|
||||
font-size: 32px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #F46;
|
||||
line-height: 44px;
|
||||
}
|
||||
|
||||
.textarea {
|
||||
width: 100%;
|
||||
padding: 34px 32px 34px 0;
|
||||
background: #FFFFFF;
|
||||
border-bottom: 1px solid #D8DDE6;
|
||||
|
||||
.label {
|
||||
display: inline-block;
|
||||
font-size: 32px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #333;
|
||||
line-height: 44px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.value {
|
||||
padding: 0 16px;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .default {
|
||||
width: 160px !important;
|
||||
height: 160px !important;
|
||||
}
|
||||
|
||||
.area-icon {
|
||||
vertical-align: super;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.footer {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
height: 112px;
|
||||
line-height: 112px;
|
||||
text-align: center;
|
||||
background: #1365DD;
|
||||
font-size: 32px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.line-bg {
|
||||
width: 100%;
|
||||
height: 16px;
|
||||
background: #F5F5F5;
|
||||
}
|
||||
|
||||
.pad-l32 {
|
||||
padding-left: 32px;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
BIN
src/project/grid/AppSpecialPeople/img/del-icon.png
Normal file
BIN
src/project/grid/AppSpecialPeople/img/del-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
src/project/grid/AppSpecialPeople/img/down-icon.png
Normal file
BIN
src/project/grid/AppSpecialPeople/img/down-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 282 B |
BIN
src/project/grid/AppSpecialPeople/img/edit-icon.png
Normal file
BIN
src/project/grid/AppSpecialPeople/img/edit-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
src/project/grid/AppSpecialPeople/img/local-icon.png
Normal file
BIN
src/project/grid/AppSpecialPeople/img/local-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
src/project/grid/AppSpecialPeople/img/search-icon.png
Normal file
BIN
src/project/grid/AppSpecialPeople/img/search-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 766 B |
BIN
src/project/grid/AppSpecialPeople/img/user-img.png
Normal file
BIN
src/project/grid/AppSpecialPeople/img/user-img.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Reference in New Issue
Block a user