<template>
<a-card :bordered="false">
<div class="table-page-search-wrapper">
<a-form layout="inline">
<a-row :gutter="48">
<a-col :md="6" :sm="24">
<a-form-item label="村组">
<a-select :allowClear="true" v-model="queryParam.village" style="width: 100%" placeholder="请选择村组">
<a-select-option v-for="(item, index) in villageData" :key="index" :value="item.value" :lable="item.name">
{{ item.name }}
</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :md="6" :sm="24">
<a-form-item label="年龄区间">
<a-select v-model="queryParam.ageRange" placeholder="请选择年龄区间" default-value="null" style="width: 100%">
<a-select-option value="1">50岁以下</a-select-option>
<a-select-option value="2">50岁-59岁</a-select-option>
<a-select-option value="3">60岁-69岁</a-select-option>
<a-select-option value="4">70岁-79岁</a-select-option>
<a-select-option value="5">80岁-89岁</a-select-option>
<a-select-option value="6">90岁以上</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :md="6" :sm="24">
<a-form-item label="性别">
<a-select v-model="queryParam.gender" placeholder="请选择性别" default-value="null" style="width: 100%">
<a-select-option value="1">男</a-select-option>
<a-select-option value="0">女</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :md="6" :sm="24">
<a-form-item label="供养方式">
<a-select :allowClear="true" v-model="queryParam.supportType" style="width: 100%" placeholder="请选择供养方式">
<a-select-option v-for="(item, index) in supportTypeData" :key="index" :value="item.value" :lable="item.name">
{{ item.name }}
</a-select-option>
</a-select>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="48">
<a-col :md="6" :sm="24">
<a-form-item label="护理等级">
<a-select :allowClear="true" v-model="queryParam.nursingLevel" style="width: 100%" placeholder="请选择护理等级">
<a-select-option v-for="(item, index) in nursingLevelData" :key="index" :value="item.value" :lable="item.name">
{{ item.name }}
</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :md="6" :sm="24">
<a-form-item label="是否在院">
<a-select v-model="queryParam.isInHospital" placeholder="请选择" default-value="null" style="width: 100%">
<a-select-option value="1">是</a-select-option>
<a-select-option value="0">否</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :md="6" :sm="24">
<a-form-item label="是否精准扶贫">
<a-select v-model="queryParam.ifHelpPoor" placeholder="请选择" default-value="null" style="width: 100%">
<a-select-option value="1">是</a-select-option>
<a-select-option value="0">否</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :md="6" :sm="24">
<a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
<a-button style="margin-left: 8px" @click="() => {queryParam = {}, $refs.table.refresh(true)}">重置</a-button>
</a-col>
</a-row>
</a-form>
<s-table ref="table" :columns="columns" :data="loadData" :rowKey="(record) => record.id">
<template slot="bringTime" slot-scope="text, record">
{{ record.bringTime | moment('YYYY-MM-DD') }}
</template>
<template slot="sex" slot-scope="text, record">
{{ record.sex == 1 ? '男' : '女' }}
</template>
<template slot="isInHospital" slot-scope="text, record">
{{ record.isInHospital == 1 ? '是' : '否' }}
</template>
<template slot="title" style="font-weight: bold;">
合计人数：{{ totalCount }}
</template>
</s-table>
</div>
</a-card>
</template>
<script>
import {
STable
} from '@/components'
import {
personPage
} from '@/api/person/personSupport'
import {
dictionaryDropDown
} from '@/api/sys/dictionaryItem'
export default {
components: {
STable
},
data() {
return {
// 查询参数
queryParam: {
village: this.$route.params.village,
ageRange: this.$route.params.ageRange,
gender: this.$route.params.gender,
nursingLevel: this.$route.params.nursingLevel,
ifHelpPoor: this.$route.params.ifHelpPoor,
supportType: this.$route.params.supportType,
isInHospital: this.$route.params.isInHospital
},
type: 1,
villageData: [],
nursingLevelData: [],
supportTypeData: [],
totalCount: 0,
// 表头
columns: [{
title: '姓名',
width: 200,
dataIndex: 'name'
},
{
title: '年龄',
dataIndex: 'age'
},
{
title: '村组',
dataIndex: 'villageName'
},
{
title: '护理等级',
dataIndex: 'nursingLevelName'
},
{
title: '供养方式',
dataIndex: 'supportTypeName'
},
{
title: '性别',
dataIndex: 'sex',
scopedSlots: {
customRender: 'sex'
}
},
{
title: '入院时间',
dataIndex: 'bringTime',
scopedSlots: {
customRender: 'bringTime'
}
},
{
title: '居住房间',
dataIndex: 'roomBed'
},
{
title: '是否在院',
dataIndex: 'isInHospital',
scopedSlots: {
customRender: 'isInHospital'
}
}
],
// 加载数据方法 必须为 Promise 对象
loadData: (parameter) => {
return personPage(Object.assign(parameter, this.queryParam, {
type: this.type
})).then((res) => {
this.totalCount = res.total
return res
})
}
}
},
// 生命周期 - 创建完成
created() {
this.dictionaryDropDown()
console.log(this.$route.params)
console.log(this.$route.params.gender)
},
// 生命周期 - 销毁完成
destroyed() {},
// 监控data中的数据变化
watch: {
$route(to, from) { // to是前往的路由 from是去往的路由 同一个组件只会渲染一次
this.$refs.table.refresh(true)
}
},
methods: {
// 详情
handleDetail(record) {
this.$router.push({
path: '/person/support/detail',
query: {
type: this.type,
id: record.id
}
})
},
/**
* 获取字典数据
*/
dictionaryDropDown() {
// 所在村
dictionaryDropDown({
dictionaryCode: '0040'
}).then(res => {
this.villageData = res.data
})
// 护理等级
dictionaryDropDown({
dictionaryCode: '0021'
}).then(res => {
this.nursingLevelData = res.data
})
// 供养方式
dictionaryDropDown({
dictionaryCode: '0020'
}).then(res => {
this.supportTypeData = res.data
})
}
}
}
</script>