parent
a74ef209ab
commit
83dc074670
@ -1,3 +1,3 @@
|
|||||||
NODE_ENV = 'development'
|
NODE_ENV = 'development'
|
||||||
VUE_APP_URL = ''
|
VUE_APP_URL = 'http://121.41.26.225:8004/1'
|
||||||
VUE_APP_CDN = ''
|
VUE_APP_CDN = 'http://121.41.26.225:8004/1'
|
||||||
@ -1,3 +1,3 @@
|
|||||||
NODE_ENV = 'production'
|
NODE_ENV = 'production'
|
||||||
VUE_APP_URL = ''
|
VUE_APP_URL = 'http://121.41.26.225:8004/1'
|
||||||
VUE_APP_CDN = ''
|
VUE_APP_CDN = 'http://121.41.26.225:8004/1'
|
||||||
@ -0,0 +1,333 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="cardTitle">住户信息</div>
|
||||||
|
<div class="search-box">
|
||||||
|
<a-row>
|
||||||
|
<a-col :span="20">
|
||||||
|
<a-space size="large">
|
||||||
|
<a-select style="width: 200px" placeholder="请选择性别" >
|
||||||
|
<a-select-option value="1">男</a-select-option>
|
||||||
|
<a-select-option value="2">女</a-select-option>
|
||||||
|
<a-select-option value="3">保密</a-select-option>
|
||||||
|
</a-select>
|
||||||
|
<a-input style="width: 200px" placeholder="请输入关键字（姓名/手机号）" />
|
||||||
|
<a-button type="primary">查 询</a-button>
|
||||||
|
<a-button>重 置</a-button>
|
||||||
|
</a-space>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="4">
|
||||||
|
<a-button class="add-btn" @click="drawer.add.show = true">添加住户</a-button>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</div>
|
||||||
|
<div class="main">
|
||||||
|
<div style="margin-bottom: 16px">
|
||||||
|
<!-- 批量操作 -->
|
||||||
|
<a-select
|
||||||
|
type="primary"
|
||||||
|
v-model="activeAction"
|
||||||
|
:disabled="!hasSelected"
|
||||||
|
:loading="loading"
|
||||||
|
style="width: 120px"
|
||||||
|
@change="Actions"
|
||||||
|
placeholder="请选择操作"
|
||||||
|
>
|
||||||
|
批量
|
||||||
|
<a-select-option v-for="item in ActionsList" :key="item.value">
|
||||||
|
{{ item.label }}
|
||||||
|
</a-select-option>
|
||||||
|
</a-select>
|
||||||
|
<span style="margin-left: 8px">
|
||||||
|
<template v-if="hasSelected">
|
||||||
|
{{ `已选择 ${selectedRowKeys.length} 条` }}
|
||||||
|
</template>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<!-- 表格 -->
|
||||||
|
<a-table
|
||||||
|
:columns="columns"
|
||||||
|
:data-source="newData"
|
||||||
|
:pagination="pagination"
|
||||||
|
:scroll="{ x: 1300 }"
|
||||||
|
:row-selection="{
|
||||||
|
selectedRowKeys: selectedRowKeys,
|
||||||
|
onChange: selectionChoosed,
|
||||||
|
}"
|
||||||
|
:row-key="
|
||||||
|
(record, index) => {
|
||||||
|
return index;
|
||||||
|
}
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<span slot="name" slot-scope="text, row">
|
||||||
|
<a-select style="width :200px" @change='changeHouse'>
|
||||||
|
<a-select-option v-for="item,index in row.residentListEstateVoList" :key='index' :value="item.id">
|
||||||
|
{{
|
||||||
|
item.manageBuildingName +
|
||||||
|
"栋/" +
|
||||||
|
item.manageUnitName +
|
||||||
|
"单元/" +
|
||||||
|
item.floorLocation +
|
||||||
|
"层-" +
|
||||||
|
item.manageEstateName +
|
||||||
|
"室"
|
||||||
|
}}
|
||||||
|
</a-select-option>
|
||||||
|
</a-select>
|
||||||
|
</span>
|
||||||
|
<span slot="action" slot-scope="text, row">
|
||||||
|
<a-space>
|
||||||
|
<a-button type="link" @click="edit(row)">编辑</a-button>
|
||||||
|
<a-button type="link" @click="del(row)">删除</a-button>
|
||||||
|
</a-space>
|
||||||
|
</span>
|
||||||
|
<span slot="tags" slot-scope="tag">
|
||||||
|
<a-tag
|
||||||
|
:color="tag === 1 ? 'volcano' : tag === 2 ? 'geekblue' : tag === 3 ? 'geekblue' : 'red'"
|
||||||
|
>
|
||||||
|
{{ tag === 1 ? "业主" : tag === 2 ? "业主亲属" :tag === 3 ? "租户":'租户亲属' }}
|
||||||
|
</a-tag>
|
||||||
|
</span>
|
||||||
|
</a-table>
|
||||||
|
</div>
|
||||||
|
<!-- add -->
|
||||||
|
<a-drawer
|
||||||
|
title="新增住户"
|
||||||
|
:width="720"
|
||||||
|
:visible="drawer.add.show"
|
||||||
|
:body-style="{ paddingBottom: '80px' }"
|
||||||
|
@close="onClose"
|
||||||
|
>
|
||||||
|
<div class="drawer-content">
|
||||||
|
基本信息
|
||||||
|
<a-divider></a-divider>
|
||||||
|
</div>
|
||||||
|
<div class="drawer-footer">
|
||||||
|
<a-button :style="{ marginRight: '8px' }" @click="drawer.add.show = false">
|
||||||
|
关闭
|
||||||
|
</a-button>
|
||||||
|
<a-button type="primary" @click="onClose"> 提交 </a-button>
|
||||||
|
</div>
|
||||||
|
</a-drawer>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
drawer:{
|
||||||
|
add:{
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
detail:{}
|
||||||
|
},
|
||||||
|
changeId:null,
|
||||||
|
pagination: {
|
||||||
|
current: 1,
|
||||||
|
total: 0,
|
||||||
|
pageSize: 10,
|
||||||
|
showTotal: (total) => `共 ${total} 条`,
|
||||||
|
showSizeChanger: true,
|
||||||
|
showQuickJumper: true,
|
||||||
|
},
|
||||||
|
activeAction: undefined,
|
||||||
|
loading: false,
|
||||||
|
// 选择的index
|
||||||
|
selectedRowKeys: [],
|
||||||
|
tableChoosed: [],
|
||||||
|
// 分页
|
||||||
|
// 列
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
title: "住户姓名",
|
||||||
|
dataIndex: "name",
|
||||||
|
width: "10%",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "住户手机号",
|
||||||
|
dataIndex: "tel",
|
||||||
|
width: "10%",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "住户性别",
|
||||||
|
dataIndex: "sex",
|
||||||
|
width: "8%",
|
||||||
|
customRender:function(sex){
|
||||||
|
switch (sex) {
|
||||||
|
case 1:
|
||||||
|
return '男'
|
||||||
|
case 2:
|
||||||
|
return '女'
|
||||||
|
case 3:
|
||||||
|
return '保密'
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "住户身份证号",
|
||||||
|
dataIndex: "idCard",
|
||||||
|
width: "10%",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "房屋名称",
|
||||||
|
dataIndex: "manageBuildingName",
|
||||||
|
scopedSlots: { customRender: "name" },
|
||||||
|
width: "20%",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "房屋类型",
|
||||||
|
dataIndex: "manageEstateTypeName",
|
||||||
|
width: "10%",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "用户身份",
|
||||||
|
key: "tags",
|
||||||
|
dataIndex: "identity",
|
||||||
|
scopedSlots: { customRender: "tags" },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "操作",
|
||||||
|
dataIndex: "action",
|
||||||
|
key: "action",
|
||||||
|
width: "180",
|
||||||
|
fixed: "right",
|
||||||
|
scopedSlots: { customRender: "action" },
|
||||||
|
},
|
||||||
|
],newData:[],
|
||||||
|
// 数据
|
||||||
|
tableData: [
|
||||||
|
{
|
||||||
|
"id": 1,
|
||||||
|
"name": "张三",
|
||||||
|
"tel": "13738611462",
|
||||||
|
"sex": 1,
|
||||||
|
"idCard": "331022199711273812",
|
||||||
|
"residentListEstateVoList": [
|
||||||
|
{
|
||||||
|
"id": 1,
|
||||||
|
"manageBuildingName": "1",
|
||||||
|
"manageUnitName": "单元1",
|
||||||
|
"floorLocation": 1,
|
||||||
|
"manageEstateName": "1室",
|
||||||
|
"manageEstateTypeName": "住宅",
|
||||||
|
"identity": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 2,
|
||||||
|
"manageBuildingName": "2",
|
||||||
|
"manageUnitName": "单元2",
|
||||||
|
"floorLocation": 3,
|
||||||
|
"manageEstateName": "3室",
|
||||||
|
"manageEstateTypeName": "住宅",
|
||||||
|
"identity": 2
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 1,
|
||||||
|
"name": "张的三",
|
||||||
|
"tel": "13738611462",
|
||||||
|
"sex": 1,
|
||||||
|
"idCard": "331022199711273812",
|
||||||
|
"residentListEstateVoList": [
|
||||||
|
{
|
||||||
|
"id": 3,
|
||||||
|
"manageBuildingName": "3",
|
||||||
|
"manageUnitName": "单元3",
|
||||||
|
"floorLocation": 3,
|
||||||
|
"manageEstateName": "3室",
|
||||||
|
"manageEstateTypeName": "住宅",
|
||||||
|
"identity": 3
|
||||||
|
},{
|
||||||
|
"id": 4,
|
||||||
|
"manageBuildingName": "4",
|
||||||
|
"manageUnitName": "单元4",
|
||||||
|
"floorLocation": 4,
|
||||||
|
"manageEstateName": "4室",
|
||||||
|
"manageEstateTypeName": "住宅",
|
||||||
|
"identity": 4
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
],
|
||||||
|
ActionsList: [
|
||||||
|
{
|
||||||
|
label: "批量删除",
|
||||||
|
value: 1,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "批量导出",
|
||||||
|
value: 2,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted(){
|
||||||
|
this.newData = this.tableData
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 表格行切换房屋
|
||||||
|
changeHouse(value){
|
||||||
|
// 遍历每行
|
||||||
|
this.newData.forEach((item,index)=>{
|
||||||
|
// 遍历每行中的所有房子
|
||||||
|
item.residentListEstateVoList.forEach(items=>{
|
||||||
|
// 当有房子id和changeid相同时
|
||||||
|
if(items.id === value){
|
||||||
|
// 给newData赋值
|
||||||
|
this.$set(this.newData[index],'identity' ,items.identity )
|
||||||
|
this.$set(this.newData[index],'manageEstateTypeName' ,items.manageEstateTypeName )
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleTableChange(pagination) {
|
||||||
|
console.log(pagination);
|
||||||
|
const pager = { ...this.pagination };
|
||||||
|
pager.current = pagination.current;
|
||||||
|
pager.pageSize = pagination.pageSize;
|
||||||
|
this.pagination = pager;
|
||||||
|
},
|
||||||
|
del(data) {
|
||||||
|
this.$confirm({
|
||||||
|
title: "是否删除",
|
||||||
|
// okText:'删除',
|
||||||
|
// cancelText:'取消',
|
||||||
|
icon: "",
|
||||||
|
onOk: function () {
|
||||||
|
console.log(data);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
Actions(data) {
|
||||||
|
console.log(data);
|
||||||
|
this.activeAction = undefined;
|
||||||
|
},
|
||||||
|
selectionChoosed(data) {
|
||||||
|
console.log(data);
|
||||||
|
this.tableChoosed = data;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
// 是否选择selection
|
||||||
|
hasSelected() {
|
||||||
|
return this.selectedRowKeys.length > 0;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.role-card {
|
||||||
|
line-height: 30px;
|
||||||
|
font-size: 16px;
|
||||||
|
cursor: pointer;
|
||||||
|
border-bottom: 1px solid #d9d9d9;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in new issue