<template>
|
<view class="container">
|
<view class="main">
|
<view class="base b-c-w" v-if="id">
|
<u-icon name="/static/icon/map.png" width="15" height="18"></u-icon>
|
<view>{{ houseAddress}}</view>
|
</view>
|
<view class="content">
|
<view class="l flex-1 flex" v-if="id">
|
<view class="flex_base">
|
<view class="head-img flex_base">
|
<u--image shape="circle" :showLoading="true" src="/static/icon/user-01.png" width="120rpx"
|
height="120rpx"></u--image>
|
</view>
|
</view>
|
<view class="info">
|
<view>姓名：{{householdInfo.name}}</view>
|
<view class="flex">
|
手机：{{householdInfo.phoneNumber || ""}} <u-icon v-if="householdInfo.phoneNumber"
|
name="phone-fill" color="#4586FE"></u-icon>
|
</view>
|
</view>
|
</view>
|
<view v-for="(item, index) in labelBtnList" :key="index" class="label-crad">
|
<newBoxTitle :title="item.name"></newBoxTitle>
|
<block v-if="item.children[0].children.length">
|
<u-collapse accordion :border="false">
|
<u-collapse-item :title="c.name" v-for="(c, k) in item.children" :key="k">
|
<view class="label-btn-box">
|
<view v-for="(i, f) in c.children" :key="f">
|
<u-button size="mini" type="primary" :color="$setLabelColor(i.color)"
|
:style="{color: $setLabelColor(i.color) && '#fff'}" :text="i.name"
|
@click="showLabelPopup(i,index,f,true)"></u-button>
|
</view>
|
</view>
|
</u-collapse-item>
|
</u-collapse>
|
</block>
|
<view class="label-btn-box" v-else>
|
<view v-for="(item, k) in item.children" :key="k">
|
<u-button size="mini" type="primary" :color="$setLabelColor(item.color)"
|
:style="{color: $setLabelColor(item.color) && '#fff'}" :text="item.name"
|
@click="showLabelPopup(item,index,k,false)"></u-button>
|
</view>
|
</view>
|
</view>
|
</view>
|
<!-- <button @click="commit" type="primary">确认</button> -->
|
</view>
|
|
<u-modal style="flex: none;" :show="popupShow" :closeOnClickOverlay="true" showCancelButton
|
@cancel="popupShow = false" @confirm="popupConfirm">
|
<view class="slot-content">
|
<view class="flex_base">
|
{{ labelModelInfo.title }}
|
</view>
|
|
<u-radio-group class="mt-40" v-model="labelValue" placement="row">
|
<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in labelList" :key="index"
|
:label="item.name" :labelColor="item.showColor" :style="{color: item.showColor && '#fff'}"
|
:name="item.name" :activeColor="item.showColor" @change="radioChange(item)">
|
</u-radio>
|
</u-radio-group>
|
|
<u--textarea class="mt-40" v-model="remark" placeholder="请输入内容"></u--textarea>
|
</view>
|
</u-modal>
|
</view>
|
</template>
|
|
<script>
|
import uploadMixin from "@/mixin/uploadMixin";
|
import newBoxTitle from '@/subPackage/house/components/boxTitle/index2.vue'
|
import {
|
getLabelListByParentId
|
} from "@/api/label/label.js";
|
import {
|
getDetail
|
} from "@/api/doorplateAddress/doorplateAddress.js";
|
import {
|
saveOrUpdateHouseholdLabel,
|
removeHouseholdLabel
|
} from "@/api/house/householdLabel.js"
|
import {
|
getHouseholdDetail
|
} from "@/api/house/household.js"
|
|
export default {
|
mixins: [uploadMixin],
|
components: {
|
newBoxTitle
|
},
|
data() {
|
return {
|
householdLabelList: [],
|
showType: false,
|
houseAddress: "",
|
houseInfo: {},
|
householdInfo: {},
|
houseCode: "",
|
popupShow: false,
|
labelBtnList: [],
|
// 安置房弹框中
|
labelList: [{
|
name: '撤销',
|
disabled: false,
|
// color: '#EBEDF0'
|
showColor: '#999',
|
color: '#999'
|
},
|
{
|
name: '绿',
|
disabled: false,
|
showColor: '#30D17C',
|
color: 'green'
|
},
|
{
|
name: '黄',
|
disabled: false,
|
showColor: '#FFB42B',
|
color: 'yellow'
|
}, {
|
name: '红',
|
disabled: false,
|
showColor: '#EA1F1F',
|
color: 'red'
|
}
|
],
|
currentLabelInfo: {},
|
currentColorInfo: {},
|
labelModelInfo: {
|
title: '',
|
selectedColor: ''
|
},
|
labelValue: '',
|
remark: '',
|
// 标记
|
number: 0,
|
id: "",
|
from: "",
|
fIndex: "",
|
cIndex: ""
|
}
|
},
|
mounted() {
|
console.log("option*****************1************==>");
|
this.getLabelList()
|
},
|
onLoad(option) {
|
console.log("option*****************2************==>");
|
// console.log("option==>", option);
|
// const data = JSON.parse(option.data);
|
// this.householdInfo = data;
|
// this.houseCode = data.houseCode
|
// if (data.id) {
|
// this.id = data.id;
|
// this.getDoorPlateAddressDetail()
|
// }
|
// if (option.from) {
|
// this.from = option.from;
|
// }
|
// this.getDoorPlateAddressDetail()
|
},
|
|
|
onShow() {
|
console.log("option*****************************==>");
|
this.getLabelList()
|
},
|
|
|
methods: {
|
// 提交
|
commit() {
|
// this.$emit('getLableCallback', this.householdLabelList);
|
},
|
|
init(from) {
|
this.from = from
|
},
|
// 获取房屋详情
|
async getDoorPlateAddressDetail() {
|
const param = {
|
addressCode: this.houseCode
|
}
|
const res = await getDetail(param)
|
this.houseInfo = res.data
|
const aoiName = (this.houseInfo.aoiName || this.houseInfo.subAoi)
|
const unitName = this.houseInfo.unitName == null ? "" : this.houseInfo.unitName
|
this.houseAddress = aoiName +
|
this.houseInfo.buildingName + unitName + this.houseInfo.houseName + "室"
|
|
},
|
// 获取房屋标签信息
|
async getLabelList() {
|
if (this.from) {
|
this.from.householdLabelList = this.householdLabelList
|
}
|
// 房屋标签处理
|
const labelParam = {
|
parentId: 1000
|
}
|
const resLabel = await getLabelListByParentId(labelParam)
|
this.labelBtnList = resLabel.data
|
const labelChildAll = []
|
// 将细类放到一起
|
this.labelBtnList.forEach(e => {
|
e.children.forEach(f => {
|
if (f.children.length) {
|
f.children.forEach(k => {
|
labelChildAll.push(k)
|
})
|
} else {
|
labelChildAll.push(f)
|
}
|
})
|
})
|
if (this.householdLabelList.length > 0) {
|
labelChildAll.forEach(e => {
|
this.householdLabelList.forEach(household => {
|
if (Number(e.id) == household.labelId) {
|
e['color'] = household.color
|
e['remark'] = household.remark
|
}
|
})
|
})
|
}
|
console.log("ces ", this.labelBtnList)
|
},
|
// 房屋弹窗
|
showLabelPopup(item, fIndex, cIndex, type) {
|
// 先清空
|
this.number = 0
|
this.labelValue = ""
|
this.remark = ""
|
this.popupShow = true
|
this.showType = type
|
this.labelModelInfo.title = item.name
|
this.currentLabelInfo = item;
|
this.fIndex = fIndex;
|
this.cIndex = cIndex;
|
// 遍历标签集合
|
this.labelList.forEach(e => {
|
if (e.color == item.color) {
|
this.labelValue = e.name
|
this.remark = item.remark
|
this.number = 1
|
}
|
})
|
},
|
// popupConfirm() {
|
// this.popupShow = false
|
// },
|
radioChange(item) {
|
this.currentColorInfo = item
|
},
|
// 更新房屋标签
|
async popupConfirm() {
|
const {
|
id
|
} = this.currentLabelInfo
|
const {
|
color,
|
name
|
} = this.currentColorInfo
|
let res = null
|
if (name === '撤销') {
|
if (this.number == 1) {
|
// this.removeLabel(id)
|
let lableList = this.householdLabelList
|
this.householdLabelList = lableList.filter(item => item.labelId !== id);
|
this.getLabelList()
|
} else {
|
uni.showToast({
|
title: "无可撤销项",
|
icon: "error",
|
duration: 1500
|
})
|
return
|
}
|
} else {
|
if (!color) return;
|
this.addLabel(id, color)
|
}
|
// 刷新页面
|
// if (!this.from) {
|
// this.getLabelList()
|
// }
|
this.popupShow = false
|
},
|
|
removeLabel(id) {
|
// if (this.from) {
|
// let item = this.labelBtnList[this.fIndex];
|
// item.children[this.cIndex].color = "";
|
// this.$set(this.labelBtnList, this.fIndex, item);
|
// this.updatePrePageData()
|
// } else
|
{
|
const data = {
|
labelId: id,
|
householdId: this.householdInfo.id
|
}
|
removeHouseholdLabel(data).then(res => {
|
if (res.code != 200) {
|
uni.showToast({
|
title: "操作失败",
|
icon: "error",
|
duration: 1200
|
})
|
} else {
|
this.getLabelList()
|
}
|
})
|
}
|
},
|
|
addLabel(id, color) {
|
let pamars = {
|
labelId: id,
|
labelName: this.labelModelInfo.title,
|
remark: this.remark,
|
lableType: 1,
|
color: color,
|
houseCode: this.from.houseCode
|
}
|
this.householdLabelList.push(pamars)
|
this.getLabelList()
|
// if (this.from) {
|
// let item = this.labelBtnList[this.fIndex];
|
// console.log("**********" + color)
|
// if (this.showType) {
|
// item.children[this.fIndex].children[this.cIndex].color = color;
|
// item.children[this.fIndex].children[this.cIndex].remark = this.remark;
|
// this.$set(this.labelBtnList, this.fIndex, item);
|
// } else {
|
// item.children[this.cIndex].color = color;
|
// item.children[this.cIndex].remark = this.remark;
|
// this.$set(this.labelBtnList, this.fIndex, item);
|
// }
|
// this.updatePrePageData()
|
// } else
|
// {
|
// saveOrUpdateHouseholdLabel({
|
// householdId: this.householdInfo.id,
|
// labelId: id,
|
// labelName: this.labelModelInfo.title,
|
// remark: this.remark,
|
// lableType: 1,
|
// color,
|
// houseCode: this.houseCode,
|
// userId: this.householdInfo.associatedUserId
|
// }).then(res => {
|
// if (res.code != 200) {
|
// uni.showToast({
|
// title: "操作失败",
|
// icon: "error",
|
// duration: 1200
|
// })
|
// } else {
|
// this.getLabelList()
|
// }
|
// })
|
// }
|
},
|
|
//更新上个页面标签数据
|
updatePrePageData() {
|
let pages = getCurrentPages();
|
let prePage = pages[pages.length - 2];
|
let arr = []
|
for (let i = 0, ii = this.labelBtnList.length; i < ii; i++) {
|
for (let k = 0, kk = this.labelBtnList[i].children.length; k < kk; k++) {
|
if (this.labelBtnList[i].children[k].color) {
|
arr.push({
|
color: this.labelBtnList[i].children[k].color,
|
labelId: this.labelBtnList[i].children[k].id,
|
labelName: this.labelBtnList[i].children[k].name,
|
lableType: 1,
|
houseCode: prePage.$vm.houseCode
|
})
|
}
|
}
|
}
|
this.$set(prePage.$vm.form, "householdLabelList", arr);
|
}
|
|
}
|
}
|
</script>
|
<style>
|
page {
|
background-color: #fff;
|
}
|
</style>
|
<style scoped lang="scss">
|
.container {
|
width: 100%;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
background: #f6f6f6;
|
|
.main {
|
|
// position: relative;
|
// height: 0;
|
// flex: 1;
|
// display: flex;
|
// flex-direction: column;
|
.base {
|
padding: 20rpx 18rpx;
|
display: flex;
|
color: #333333;
|
background: #fff;
|
min-height: 38rpx;
|
font-size: 30rpx;
|
|
view {
|
margin-left: 15rpx;
|
}
|
}
|
|
.content {
|
// height: 0;
|
// flex: 1;
|
overflow-y: auto;
|
margin: 20rpx 30rpx;
|
|
.l {
|
background-color: #ffffff;
|
align-items: center;
|
padding: 30rpx 30rpx;
|
border-radius: 8rpx;
|
|
.head-img {
|
width: 124rpx;
|
height: 124rpx;
|
border-radius: 50%;
|
}
|
|
.info {
|
margin-left: 20rpx;
|
font-size: 24rpx;
|
|
&>view {
|
height: 56rpx;
|
line-height: 56rpx;
|
}
|
}
|
}
|
|
.basic-info {
|
.form-item {
|
background-color: #ffffff;
|
padding: 5rpx 20rpx;
|
}
|
}
|
|
.pic {
|
background-color: #ffffff;
|
padding: 40rpx 30rpx;
|
}
|
|
.label-crad {
|
background-color: #fff;
|
margin-top: 20rpx;
|
padding: 30rpx;
|
border-radius: 8rpx;
|
|
.label-btn-box {
|
display: flex;
|
flex-direction: row;
|
flex-wrap: wrap;
|
|
&>view {
|
margin: 0 20rpx 20rpx 0;
|
|
/deep/ .u-button {
|
padding: 6rpx 8rpx;
|
border-width: 0 !important;
|
background-color: #F5F5F5;
|
color: #999999;
|
}
|
}
|
}
|
}
|
|
|
|
}
|
}
|
}
|
</style>
|
