目录代码整合
This commit is contained in:
aixianling
204
packages/grid/AppHomesteadManagement/components/List.vue
Normal file
204
packages/grid/AppHomesteadManagement/components/List.vue
Normal file
@@ -0,0 +1,204 @@
|
||||
<template>
|
||||
<section class="AppPetitionManage">
|
||||
<ai-list>
|
||||
<!-- 标题 -->
|
||||
<ai-title slot="title" title="宅基地管理" isShowBottomBorder isShowArea v-model="areaId" :instance="instance" @change="page.current=1,getList()"/>
|
||||
<template #content>
|
||||
<ai-search-bar bottomBorder>
|
||||
<template slot="left">
|
||||
<!-- 定位状态 -->
|
||||
<ai-select v-model="search.locationStatus" placeholder="定位状态" clearable :selectList="$dict.getDict('homesteadLocationStatus')" @change=";(page.current = 1), getList()"></ai-select>
|
||||
</template>
|
||||
|
||||
<!-- 搜索 -->
|
||||
<template slot="right">
|
||||
<el-input v-model="search.name" size="small"
|
||||
v-throttle="() => {page.current = 1, getList()}" placeholder="户主/联系电话" clearable @clear=";(page.current = 1), (search.name = ''), getList()" suffix-icon="iconfont iconSearch" />
|
||||
</template>
|
||||
</ai-search-bar>
|
||||
|
||||
<ai-search-bar class="ai-search-ba mar-t10">
|
||||
<template slot="left">
|
||||
<el-button icon="iconfont iconAdd" type="primary" size="small" @click="onAdd('')">添加 </el-button>
|
||||
<el-button icon="iconfont iconDelete" size="small" @click="removeAll" :disabled="ids.length == 0">删除 </el-button>
|
||||
</template>
|
||||
|
||||
<!-- 导入导出 -->
|
||||
<template #right>
|
||||
<ai-import :instance="instance" :dict="dict" type="apphomesteadinfo" :importParams="{ areaId: user.info && user.info.areaId }" name="宅基地管理" @success="getList()">
|
||||
<el-button icon="iconfont iconImport">导入</el-button>
|
||||
</ai-import>
|
||||
<ai-download :instance="instance" url="/app/apphomesteadinfo/export" :params="param" fileName="宅基地管理模板" :disabled="tableData.length == 0">
|
||||
<el-button icon="iconfont iconExported" :disabled="tableData.length == 0">导出</el-button>
|
||||
</ai-download>
|
||||
</template>
|
||||
</ai-search-bar>
|
||||
|
||||
<ai-table :tableData="tableData" :col-configs="colConfigs" :total="total" ref="aitableex" :current.sync="page.current" :size.sync="page.size" @getList="getList" @selection-change="(v) => (ids = v.map((e) => e.id))">
|
||||
<el-table-column slot="locationStatus" label="定位状态" align="center">
|
||||
<template slot-scope="{ row }">
|
||||
<span style="color:red" v-if="row.locationStatus == 0">{{ dict.getLabel('homesteadLocationStatus', row.locationStatus) }}</span>
|
||||
<span style="color:green" v-if="row.locationStatus == 1">{{ dict.getLabel('homesteadLocationStatus', row.locationStatus) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column slot="options" label="操作" align="center" width="180" fixed="right">
|
||||
<template slot-scope="{ row }">
|
||||
<el-button type="text" @click="onAdd(row.id)">编辑</el-button>
|
||||
<el-button type="text" @click="remove(row.id)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</ai-table>
|
||||
</template>
|
||||
</ai-list>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'List',
|
||||
props: {
|
||||
dict: Object,
|
||||
instance: Function,
|
||||
params: Object,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
isAdd: false,
|
||||
page: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
},
|
||||
total: 0,
|
||||
search: {
|
||||
locationStatus: '',
|
||||
name: '',
|
||||
},
|
||||
id: '',
|
||||
ids: [],
|
||||
colConfigs: [
|
||||
{ type: 'selection', width: 100, align: 'center'},
|
||||
{
|
||||
prop: 'areaName',
|
||||
label: '村/社区',
|
||||
},
|
||||
{
|
||||
prop: 'name',
|
||||
label: '户主',
|
||||
align: 'center',
|
||||
},
|
||||
{ prop: 'phone', label: '联系电话', align: 'center' },
|
||||
{
|
||||
prop: 'sex',
|
||||
label: '性别',
|
||||
width: '100',
|
||||
align: 'center',
|
||||
render: (h, { row }) => {
|
||||
return h('span', null, this.dict.getLabel('sex', row.sex))
|
||||
},
|
||||
},
|
||||
{ prop: 'age', label: '年龄', align: 'center' },
|
||||
{
|
||||
prop: 'idNumber',
|
||||
label: '身份证号',
|
||||
align: 'center',
|
||||
},
|
||||
{ prop: 'liveBuildingArea', label: '建筑面积(m²)', align: 'center',width: 120 },
|
||||
{
|
||||
slot: 'locationStatus'
|
||||
},
|
||||
{
|
||||
slot: 'options',
|
||||
label: '操作',
|
||||
align: 'center',
|
||||
},
|
||||
],
|
||||
tableData: [],
|
||||
areaId: '',
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
|
||||
param() {
|
||||
return {
|
||||
...this.search,
|
||||
areaId: this.user.info?.areaId,
|
||||
ids: this.ids,
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.areaId = this.user.info.areaId
|
||||
this.dict.load('homesteadLocationStatus', 'homesteadHouseType', 'homesteadLandType', 'sex').then(() => {
|
||||
this.getList()
|
||||
})
|
||||
},
|
||||
|
||||
methods: {
|
||||
getList() {
|
||||
this.instance
|
||||
.post(`/app/apphomesteadinfo/list`, null, {
|
||||
params: {
|
||||
...this.page,
|
||||
...this.search,
|
||||
areaId: this.areaId,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code == 0) {
|
||||
if(res.data.records.length) {
|
||||
res.data.records.map((item) => {
|
||||
item.idNumber = item.idNumber.substring(0,10) + '****' + item.idNumber.substring(13,17)
|
||||
})
|
||||
}
|
||||
this.tableData = res.data.records
|
||||
this.total = res.data.total
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 添加
|
||||
onAdd(id) {
|
||||
this.$emit('change', {
|
||||
type: 'add',
|
||||
params: {
|
||||
id: id || '',
|
||||
areaId: this.areaId,
|
||||
},
|
||||
})
|
||||
},
|
||||
|
||||
// 删除
|
||||
remove(id) {
|
||||
this.$confirm('确定删除该数据?').then(() => {
|
||||
this.instance.post(`/app/apphomesteadinfo/delete?ids=${id}`).then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success('删除成功！')
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
removeAll() {
|
||||
var id = this.ids.join(',')
|
||||
this.remove(id)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.AppPetitionManage {
|
||||
height: 100%;
|
||||
.mar-t10{
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user