|
|
@@ -2,34 +2,37 @@
|
|
|
<div class="maintenance">
|
|
|
<div class="topSearchBox">
|
|
|
<van-field
|
|
|
- v-model="value1"
|
|
|
+ :value="value1"
|
|
|
right-icon="search"
|
|
|
class="input-item"
|
|
|
placeholder="请输入房号"
|
|
|
+ @change="changeSearchNo"
|
|
|
/>
|
|
|
</div>
|
|
|
<div class="selectBody" :style="{ height: height + 'rpx' }">
|
|
|
<div class="selectRow">
|
|
|
<span class="rowTitle">园区</span>
|
|
|
<div class="selectItemBox">
|
|
|
- <span class="unSelectItem" :class="parkSelect?'selectItem':''">科教产业园</span>
|
|
|
+ <span class="unSelectItem"
|
|
|
+ :class="item.select?'selectItem':''"
|
|
|
+ v-for="item in yuanqu_loacldata"
|
|
|
+ @click="clickGroupItem(item)">
|
|
|
+ {{item.name}}
|
|
|
+ </span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<van-icon name="arrow-down" class="arrowDown" style="font-size: 40rpx;margin-top: 40rpx;font-weight: 600" @tap="closeSelectBody" v-if="height<200"/>
|
|
|
- <div class="selectRow">
|
|
|
+ <div class="selectRow" v-if="form.groupIds != null">
|
|
|
<span class="rowTitle">楼盘</span>
|
|
|
- <div class="selectItemBox">
|
|
|
- <span class="unSelectItem" v-for="item in properties" :class="item.select?'selectItem':''" @click="clickItem(item)">{{ item.name }}</span>
|
|
|
+ <div class="selectItemBox loupanBox">
|
|
|
+ <span class="unSelectItem" v-for="item in loupan_loacldata" :class="item.select?'selectItem':''" @click="clickItem(item)">{{ item.name }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="selectRow">
|
|
|
<span class="rowTitle">朝向</span>
|
|
|
<div class="selectItemBox">
|
|
|
<van-checkbox-group :value="toward" @change="onChange" >
|
|
|
- <van-checkbox name="东" shape="square">东</van-checkbox>
|
|
|
- <van-checkbox name="南" shape="square">南</van-checkbox>
|
|
|
- <van-checkbox name="西" shape="square">西</van-checkbox>
|
|
|
- <van-checkbox name="北" shape="square">北</van-checkbox>
|
|
|
+ <van-checkbox :name="item.value" shape="square" v-for="item in mnpList" :key="item.id">{{ item.label }}</van-checkbox>
|
|
|
</van-checkbox-group>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -37,8 +40,7 @@
|
|
|
<span class="rowTitle">可用状态</span>
|
|
|
<div class="selectItemBox">
|
|
|
<van-checkbox-group :value="avaStatus" @change="avaChange" >
|
|
|
- <van-checkbox name="可用" shape="square">可用</van-checkbox>
|
|
|
- <van-checkbox name="禁用" shape="square">禁用</van-checkbox>
|
|
|
+ <van-checkbox :name="item.value" shape="square" v-for="item in enableList" :key="item.id">{{item.label}}</van-checkbox>
|
|
|
</van-checkbox-group>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -46,13 +48,7 @@
|
|
|
<span class="rowTitle">租赁状态</span>
|
|
|
<div class="selectItemBox selectItemBoxMoreItem">
|
|
|
<van-checkbox-group :value="rentalStatus" @change="rentalChange" >
|
|
|
- <van-checkbox name="正常" shape="square">正常</van-checkbox>
|
|
|
- <van-checkbox name="司法" shape="square">司法</van-checkbox>
|
|
|
- <van-checkbox name="出售" shape="square">出售</van-checkbox>
|
|
|
- <van-checkbox name="空闲" shape="square">空闲</van-checkbox>
|
|
|
- <van-checkbox name="招商锁定" shape="square">招商锁定</van-checkbox>
|
|
|
- <van-checkbox name="办公占用" shape="square">办公占用</van-checkbox>
|
|
|
- <van-checkbox name="临时占用" shape="square">临时占用</van-checkbox>
|
|
|
+ <van-checkbox :name="item.value" shape="square" v-for="item in zlList" :key="item.id">{{item.label}}</van-checkbox>
|
|
|
</van-checkbox-group>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -60,9 +56,7 @@
|
|
|
<span class="rowTitle">用途</span>
|
|
|
<div class="selectItemBox">
|
|
|
<van-checkbox-group :value="useTo" @change="useToChange" >
|
|
|
- <van-checkbox name="研发办公" shape="square">研发办公</van-checkbox>
|
|
|
- <van-checkbox name="生活配套" shape="square">生活配套</van-checkbox>
|
|
|
- <van-checkbox name="生产用房" shape="square">生产用房</van-checkbox>
|
|
|
+ <van-checkbox :name="item.value" shape="square" v-for="item in usageList" :key="item.id">{{item.label}}</van-checkbox>
|
|
|
</van-checkbox-group>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -70,62 +64,72 @@
|
|
|
<span class="rowTitle">物业性质</span>
|
|
|
<div class="selectItemBox">
|
|
|
<van-checkbox-group :value="propertyNature" @change="natureChange" >
|
|
|
- <van-checkbox name="自由物业" shape="square">自由物业</van-checkbox>
|
|
|
- <van-checkbox name="社会物业" shape="square">社会物业</van-checkbox>
|
|
|
+ <van-checkbox :name="item.value" shape="square" v-for="item in natureList" :key="item.id">{{item.label}}</van-checkbox>
|
|
|
</van-checkbox-group>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="selectRow">
|
|
|
<span class="rowTitle">指导价</span>
|
|
|
<div class="selectItemBox">
|
|
|
- <input placeholder="元/㎡/月" class="myIpt"/>
|
|
|
+ <input placeholder="元/㎡/月" class="myIpt" v-model="form.guidePrice1"/>
|
|
|
<span style="margin: 0 18rpx">—</span>
|
|
|
- <input placeholder="元/㎡/月" class="myIpt"/>
|
|
|
+ <input placeholder="元/㎡/月" class="myIpt" v-model="form.guidePrice2"/>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="selectRow">
|
|
|
<span class="rowTitle">面积</span>
|
|
|
<div class="selectItemBox">
|
|
|
- <input placeholder="㎡" class="myIpt" />
|
|
|
+ <input placeholder="㎡" class="myIpt" v-model="form.roomSize1"/>
|
|
|
<span style="margin: 0 18rpx">—</span>
|
|
|
- <input placeholder="㎡" class="myIpt" />
|
|
|
+ <input placeholder="㎡" class="myIpt" v-model="form.roomSize2"/>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="btnBox">
|
|
|
- <button class="czBtn">重置</button>
|
|
|
- <button class="ssBtn">搜索</button>
|
|
|
+ <button class="czBtn" @tap="reset">重置</button>
|
|
|
+ <button class="ssBtn" @tap="search()">搜索</button>
|
|
|
</div>
|
|
|
<van-icon name="arrow-up" style="font-size: 40rpx;margin-top: 40rpx;font-weight: 600" @tap="closeSelectBody"/>
|
|
|
</div>
|
|
|
<div class="bottomBody">
|
|
|
- <van-tabs :active="active" @change="onChange">
|
|
|
- <van-tab title="全部" :name="0"></van-tab>
|
|
|
- <van-tab title="A" :name="1"></van-tab>
|
|
|
- <van-tab title="B1" :name="2"></van-tab>
|
|
|
- <van-tab title="B2" :name="3"></van-tab>
|
|
|
- <van-tab title="B3" :name="4"></van-tab>
|
|
|
- <van-tab title="C" :name="5"></van-tab>
|
|
|
+ <van-tabs :active="active" @change="buildChange">
|
|
|
+ <van-tab
|
|
|
+ v-for="(item, index) in loudongList"
|
|
|
+ :title="item.ldmc"
|
|
|
+ :name="item.id"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ </van-tab>
|
|
|
</van-tabs>
|
|
|
<div class="sumBox">
|
|
|
- 共 <span style="color: rgba(3, 101, 249, 1);margin: 0 5rpx">20</span> 间
|
|
|
+ 共 <span style="color: rgba(3, 101, 249, 1);margin: 0 5rpx">{{ form.total }}</span> 间
|
|
|
</div>
|
|
|
<div class="listBody">
|
|
|
- <div class="listItem" v-for="item in 5" @tap="toEdit(item)">
|
|
|
+ <div class="listItem" v-for="item in roomList" @tap="toEdit(item)">
|
|
|
<div class="firstRow">
|
|
|
- <span class="itemTitle">中国物联网国际创新园一期A1101</span>
|
|
|
- <span class="tag">正常</span>
|
|
|
+ <span class="itemTitle">{{
|
|
|
+ item.yuanquName + item.quyuName + item.loudongName + item.roomNo
|
|
|
+ }}</span>
|
|
|
+ <span class="tag">{{getDicType("currentState", item.currentState)}}</span>
|
|
|
</div>
|
|
|
<div class="midRow">
|
|
|
- <span style="width: 300rpx">用途：研发办公</span>
|
|
|
- <span>装修情况：未知</span>
|
|
|
+ <span style="width: 300rpx">用途：{{
|
|
|
+ getDicType("roomUse", item.roomUse) == undefined
|
|
|
+ ? "未知"
|
|
|
+ : getDicType("roomUse", item.roomUse)
|
|
|
+ }}</span>
|
|
|
+ <span>装修情况：{{
|
|
|
+ !item.decorationSituation ? "未知" : item.decorationSituation
|
|
|
+ }}</span>
|
|
|
</div>
|
|
|
<div class="midRow">
|
|
|
- <span style="width: 300rpx">面积（㎡）：356㎡</span>
|
|
|
- <span>朝向：未知</span>
|
|
|
+ <span style="width: 300rpx">面积（㎡）：{{ item.roomSize }}㎡</span>
|
|
|
+ <span>朝向：{{ item.roomDirection ? item.roomDirection : "未知" }}</span>
|
|
|
</div>
|
|
|
<div class="bottomRow">
|
|
|
<span>出租指导价（元/㎡/月）：</span>
|
|
|
- <span class="money">30~35</span>
|
|
|
+ <span class="money">{{
|
|
|
+ !item.guidePrice ? "未知" : item.guidePrice
|
|
|
+ }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -134,45 +138,216 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import {
|
|
|
+ findYuanQuList,
|
|
|
+ findLongPanList,
|
|
|
+ findLouDongList,
|
|
|
+ findRoomByCondition,
|
|
|
+ findRoomByConditionExcel,
|
|
|
+ getByCodes,
|
|
|
+} from "@/js_sdk/http";
|
|
|
export default {
|
|
|
name: "maintenance",
|
|
|
data(){
|
|
|
return{
|
|
|
+ dic_key: ["PROPERTY_NATURE", "HOUSE_USAGE", "INVESTMENT_STATUS", "HOUSE_ENABLE","MNP_BUILDING_CX", "HOUSE_USAGE", "PROPERTY_NATURE"],
|
|
|
+ zlList:[],
|
|
|
+ enableList:[],
|
|
|
+ mnpList:[],
|
|
|
+ usageList:[],
|
|
|
+ natureList:[],
|
|
|
value1:'',
|
|
|
parkSelect:true,
|
|
|
properties: [
|
|
|
- {name:'一期', select:true},
|
|
|
- {name:'二期', select:false},
|
|
|
- {name:'三期', select:false},
|
|
|
- {name:'四期', select:false},
|
|
|
+ // {name:'一期', select:true},
|
|
|
+ // {name:'二期', select:false},
|
|
|
+ // {name:'三期', select:false},
|
|
|
+ // {name:'四期', select:false},
|
|
|
],
|
|
|
- toward: ['东', '北'],
|
|
|
- avaStatus:['可用'],
|
|
|
+ toward: [],
|
|
|
+ avaStatus:[],
|
|
|
rentalStatus:[],
|
|
|
useTo:[],
|
|
|
propertyNature:[],
|
|
|
height: 1036,
|
|
|
- active: 0
|
|
|
+ active: 0,
|
|
|
+ groupIds: [],
|
|
|
+ yuanqu_loacldata: [],
|
|
|
+ loupan_loacldata: [],
|
|
|
+ loudongList: [],
|
|
|
+ form: {},
|
|
|
+ roomList: [],
|
|
|
+ discIds: [],
|
|
|
+ timeout: null
|
|
|
}
|
|
|
},
|
|
|
+ created() {
|
|
|
+ this.findYuanQuList();
|
|
|
+ this.getByCodes();
|
|
|
+ },
|
|
|
methods:{
|
|
|
- clickItem(item){
|
|
|
+ changeSearchNo(e){
|
|
|
+ if (this.timeout) {
|
|
|
+ clearTimeout(this.timeout)
|
|
|
+ }
|
|
|
+ this.timeout = setTimeout(()=>{
|
|
|
+ this.form.roomNo = e.detail
|
|
|
+ this.search()
|
|
|
+ },500)
|
|
|
+ console.log(e.detail)
|
|
|
+ },
|
|
|
+ reset() {
|
|
|
+ this.groupIds = []
|
|
|
+ this.discIds = []
|
|
|
+ this.toward = []
|
|
|
+ this.avaStatus = []
|
|
|
+ this.rentalStatus = []
|
|
|
+ this.useTo = []
|
|
|
+ this.loudongList = [];
|
|
|
+ this.roomList = [];
|
|
|
+ this.form = {};
|
|
|
+ this.findYuanQuList();
|
|
|
+ this.getByCodes();
|
|
|
+ },
|
|
|
+ clickGroupItem(item) {
|
|
|
+ item.select = !item.select
|
|
|
+ if (this.groupIds.includes(item.value)) {
|
|
|
+ this.groupIds = this.groupIds.filter(function (ele) {
|
|
|
+ return ele !== item.value
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.groupIds.push(item.value)
|
|
|
+ }
|
|
|
+ this.form.groupIds = this.groupIds.join(',')
|
|
|
+ if (this.form.groupIds) {
|
|
|
+ this.yuanQuChange()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async yuanQuChange() {
|
|
|
+ let data = await findLongPanList(this.form.groupIds);
|
|
|
+ this.roomList = [];
|
|
|
+ this.loudongList = [];
|
|
|
+ if (data.length > 0) {
|
|
|
+ this.loupan_loacldata = data.map((e) => {
|
|
|
+ return {
|
|
|
+ value: e.id,
|
|
|
+ name: e.name,
|
|
|
+ select: false
|
|
|
+ };
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.loupan_loacldata = [{value: null, name: "暂无", select: false}];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ findYuanQuList() {
|
|
|
+ findYuanQuList().then((data) => {
|
|
|
+ let yuanqu_list = [...data];
|
|
|
+ let yuanqu_loacldata = yuanqu_list.map((e) => {
|
|
|
+ return {
|
|
|
+ value: e.id,
|
|
|
+ name: e.groupName,
|
|
|
+ select: false
|
|
|
+ };
|
|
|
+ });
|
|
|
+ this.yuanqu_loacldata = yuanqu_loacldata;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ clickItem(item) {
|
|
|
item.select = !item.select
|
|
|
+ if (this.discIds.includes(item.value)) {
|
|
|
+ // includes()方法判断是否包含某一元素,返回true或false表示是否包含元素，对NaN一样有效
|
|
|
+ // filter()方法用于把Array的某些元素过滤掉，filter()把传入的函数依次作用于每个元素，然后根据返回值是true还是false决定保留还是丢弃该元素：生成新的数组
|
|
|
+ this.discIds = this.discIds.filter(function (ele) {
|
|
|
+ return ele !== item.value
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.discIds.push(item.value)
|
|
|
+ }
|
|
|
+ this.form.discIds = this.discIds.join(',')
|
|
|
+ if (this.form.discIds) {
|
|
|
+ this.louPanChange()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async louPanChange() {
|
|
|
+ try {
|
|
|
+ let data = await findLouDongList(this.form.discIds);
|
|
|
+ if (data.length == 0) {
|
|
|
+ this.loudongList = [];
|
|
|
+ this.roomList = [];
|
|
|
+ return;
|
|
|
+ } else {
|
|
|
+ this.loudongList = [...data];
|
|
|
+ this.form.mnpBuildingIds = data[0].id;
|
|
|
+ this.roomList = [];
|
|
|
+ }
|
|
|
+
|
|
|
+ let row = await findRoomByConditionExcel(this.form);
|
|
|
+ this.roomList = row;
|
|
|
+ this.form.total = row.length;
|
|
|
+ this.vamTabStatus = true;
|
|
|
+ } catch (e) {
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async buildChange(e) {
|
|
|
+ this.form.mnpBuildingIds = e.detail.name
|
|
|
+ let data = await findRoomByConditionExcel(this.form);
|
|
|
+ this.roomList = data;
|
|
|
+ this.form.total = data.length;
|
|
|
+ },
|
|
|
+ async search() {
|
|
|
+ console.log('this.form', this.form)
|
|
|
+ if (!this.form.groupIds && !this.form.discIds) {
|
|
|
+ return this.$showToast("请选择园区和楼盘后重试");
|
|
|
+ }
|
|
|
+ if (!this.form.groupIds) {
|
|
|
+ return this.$showToast("请选择园区后重试");
|
|
|
+ }
|
|
|
+ if (!this.form.discIds) {
|
|
|
+ return this.$showToast("请选择楼盘后重试");
|
|
|
+ }
|
|
|
+ let data = await findRoomByConditionExcel(this.form);
|
|
|
+ this.roomList = data;
|
|
|
+ this.form.total = data.length;
|
|
|
+ },
|
|
|
+ getDicType(type, value) {
|
|
|
+ if (!value) return;
|
|
|
+ if (type == "zaiti") {
|
|
|
+ let PROPERTY_NATURE = this.dic_SelectList.PROPERTY_NATURE;
|
|
|
+
|
|
|
+ let index = PROPERTY_NATURE.findIndex((e) => e.value == value);
|
|
|
+ return PROPERTY_NATURE[index].label;
|
|
|
+ }
|
|
|
+ if (type == "roomUse") {
|
|
|
+ let HOUSE_USAGE = this.dic_SelectList.HOUSE_USAGE;
|
|
|
+ let index = HOUSE_USAGE.findIndex((e) => e.value == value);
|
|
|
+ return HOUSE_USAGE[index].label;
|
|
|
+ }
|
|
|
+ if (type == "currentState") {
|
|
|
+ let INVESTMENT_STATUS = this.dic_SelectList.INVESTMENT_STATUS;
|
|
|
+ let index = INVESTMENT_STATUS.findIndex((e) => e.value == value);
|
|
|
+ return INVESTMENT_STATUS[index].label;
|
|
|
+ }
|
|
|
},
|
|
|
onChange(e){
|
|
|
+ // console.log(e)
|
|
|
this.toward = e.detail
|
|
|
+ this.form.roomDirection = this.toward.join(',')
|
|
|
},
|
|
|
avaChange(e){
|
|
|
this.avaStatus = e.detail
|
|
|
+ this.form.isEnable = this.avaStatus.join(',')
|
|
|
},
|
|
|
rentalChange(e){
|
|
|
this.rentalStatus = e.detail
|
|
|
+ this.form.currentState = this.rentalStatus.join(',')
|
|
|
},
|
|
|
useToChange(e){
|
|
|
this.useTo = e.detail
|
|
|
+ this.form.roomUse = this.useTo.join(',')
|
|
|
},
|
|
|
natureChange(e){
|
|
|
this.propertyNature = e.detail
|
|
|
+ this.form.propertyNature = this.propertyNature.join(',')
|
|
|
},
|
|
|
closeSelectBody(){
|
|
|
if (this.height > 1000){
|
|
|
@@ -181,6 +356,15 @@ export default {
|
|
|
this.height = 1036
|
|
|
}
|
|
|
},
|
|
|
+ async getByCodes() {
|
|
|
+ let data = await getByCodes(JSON.stringify(this.dic_key));
|
|
|
+ this.dic_SelectList = this.$common.handleDicList(data);
|
|
|
+ this.zlList = this.dic_SelectList.INVESTMENT_STATUS
|
|
|
+ this.enableList = this.dic_SelectList.HOUSE_ENABLE
|
|
|
+ this.mnpList = this.dic_SelectList.MNP_BUILDING_CX
|
|
|
+ this.usageList = this.dic_SelectList.HOUSE_USAGE
|
|
|
+ this.natureList = this.dic_SelectList.PROPERTY_NATURE
|
|
|
+ },
|
|
|
toEdit(item) {
|
|
|
uni.navigateTo({
|
|
|
url:'/pages/subPackages/propertyManagement/propertyEditor'
|
|
|
@@ -233,6 +417,7 @@ export default {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
margin-left: 24rpx;
|
|
|
+ white-space: nowrap;
|
|
|
.unSelectItem{
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
@@ -286,6 +471,9 @@ export default {
|
|
|
font-size: 26rpx;
|
|
|
}
|
|
|
}
|
|
|
+ .loupanBox{
|
|
|
+ overflow-x: scroll;
|
|
|
+ }
|
|
|
.selectItemBoxMoreItem{
|
|
|
.van-checkbox{
|
|
|
margin:0 24rpx 24rpx 0;
|
|
|
@@ -359,8 +547,7 @@ export default {
|
|
|
font-weight: 600;
|
|
|
}
|
|
|
.tag{
|
|
|
- width: 120rpx;
|
|
|
- height: 48rpx;
|
|
|
+ padding: 12rpx 24rpx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
