目录代码整合
This commit is contained in:
aixianling
205
packages/conv/AppVaccination/AppVaccination.vue
Normal file
205
packages/conv/AppVaccination/AppVaccination.vue
Normal file
@@ -0,0 +1,205 @@
|
||||
<template>
|
||||
<section class="AppVaccination">
|
||||
<ai-list v-if="!showDetail">
|
||||
<ai-title slot="title" title="疫苗接种" isShowBottomBorder isShowArea v-model="areaId" :instance="instance"
|
||||
@change="page.current=1,getTableData()"/>
|
||||
<template #blank>
|
||||
<el-row type="flex">
|
||||
<div class="dataPane" v-for="(op,i) in dataPanes" :key="i">
|
||||
{{ [op.label, op.v].join(" ") }}
|
||||
</div>
|
||||
</el-row>
|
||||
<div class="mainPane">
|
||||
<ai-search-bar>
|
||||
<template #left>
|
||||
<ai-select placeholder="接种状况" v-model="search.inoculationType" @change="page.current=1,getTableData()"
|
||||
:selectList="dict.getDict('vaccineInoculationType')"/>
|
||||
</template>
|
||||
<template #right>
|
||||
<el-input placeholder="姓名/身份证/联系方式"
|
||||
v-model="search.name"
|
||||
size="small"
|
||||
clearable
|
||||
@clear="page.current = 1,search.name = '', getTableData()"
|
||||
v-throttle="() => {page.current = 1, getTableData()}"
|
||||
suffix-icon="iconfont iconSearch"/>
|
||||
</template>
|
||||
</ai-search-bar>
|
||||
<ai-search-bar>
|
||||
<template #left>
|
||||
<el-button type="primary" icon="iconfont iconAdd" @click="$router.push({hash:'#add'})">添加</el-button>
|
||||
<el-button icon="iconfont iconDelete" :disabled="!ids.length" @click="handleDelete(ids)">删除</el-button>
|
||||
</template>
|
||||
<template #right>
|
||||
<ai-import :instance="instance" :dict="dict" name="疫苗接种" suffixName="xlsx"
|
||||
type="appvaccineinoculationuser" @onSuccess="resetSearch"/>
|
||||
<ai-download url="/app/appvaccineinoculationuser/export" :params="{...search,areaId,ids:ids.toString()}"
|
||||
:instance="instance" fileName="疫苗接种导出文件"/>
|
||||
</template>
|
||||
</ai-search-bar>
|
||||
<ai-table :tableData="tableData" :colConfigs="colConfigs" :total="page.total" :current.sync="page.current"
|
||||
:size.sync="page.size" @getList="getTableData" :dict="dict"
|
||||
@selection-change="v=>ids=v.map(e=>e.id)">
|
||||
<el-table-column slot="vaccinationDate" label="接种日期" align="center" class-name="vaccinationDate">
|
||||
<el-table-column label="第一次" align="center" prop="firstDate"/>
|
||||
<el-table-column label="第二次" align="center" prop="secondDate"/>
|
||||
<el-table-column label="第三次" align="center" prop="thirdDate"/>
|
||||
</el-table-column>
|
||||
<el-table-column slot="options" label="操作" align="center" fixed="right">
|
||||
<template slot-scope="{row:{id}}">
|
||||
<el-button type="text" @click="$router.push({hash:'#add',query:{id}})">编辑</el-button>
|
||||
<el-button type="text" @click="handleDelete(id)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</ai-table>
|
||||
</div>
|
||||
</template>
|
||||
</ai-list>
|
||||
<add-vaccination v-else :dict="dict" :instance="instance"/>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState} from "vuex";
|
||||
import AddVaccination from "./addVaccination";
|
||||
|
||||
export default {
|
||||
name: "AppVaccination",
|
||||
components: {AddVaccination},
|
||||
label: "疫苗接种",
|
||||
provide() {
|
||||
return {
|
||||
top: this
|
||||
}
|
||||
},
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
permissions: Function,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
areaId: "",
|
||||
page: {current: 1, size: 10, total: 0},
|
||||
search: {inoculationType: "", name: ""},
|
||||
ids: [],
|
||||
tableData: [],
|
||||
staData: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
showDetail() {
|
||||
return this.$route.hash == "#add"
|
||||
},
|
||||
dataPanes() {
|
||||
return [
|
||||
{label: "总接种人数", v: this.staData.zjzrs || 0},
|
||||
{label: "已接种第一针人数", v: this.staData.yjzdyzrs || 0},
|
||||
{label: "已接种第二针人数", v: this.staData.yjzdezrs || 0},
|
||||
{label: "已接种第三针人数", v: this.staData.yjzdszrs || 0},
|
||||
]
|
||||
},
|
||||
colConfigs() {
|
||||
return [
|
||||
{type: "selection", align: 'center'},
|
||||
{label: "姓名", prop: "name", align: 'center'},
|
||||
{label: "性别", prop: "sex", dict: 'sex', align: 'center'},
|
||||
{label: "出生日期", prop: "birthday", align: 'center'},
|
||||
{
|
||||
label: "身份证号", width: "160px", align: 'center',
|
||||
render: (h, {row}) => h('span', null, this.idCardNoUtil.hideId(row.idNumber))
|
||||
},
|
||||
{label: "所属地区", prop: "areaName", align: 'center'},
|
||||
{label: "住址", prop: "address", width: "200px", align: 'center'},
|
||||
{label: "联系方式", prop: "phone", align: 'center'},
|
||||
{slot: 'vaccinationDate'},
|
||||
{slot: "options"},
|
||||
]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.areaId = JSON.parse(JSON.stringify(this.user.info.areaId))
|
||||
this.dict.load('sex', 'vaccineInoculationType')
|
||||
this.getTableData()
|
||||
},
|
||||
methods: {
|
||||
getStaData() {
|
||||
this.instance.post(`/app/appvaccineinoculationuser/countByAreaId`, null, {
|
||||
params: {areaId: this.areaId}
|
||||
}).then(res => {
|
||||
if (res?.data) {
|
||||
this.staData = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
getTableData() {
|
||||
this.page.current == 1 && this.getStaData()
|
||||
this.instance.post(`/app/appvaccineinoculationuser/list`, null, {
|
||||
params: {...this.search, ...this.page, areaId: this.areaId}
|
||||
}).then(res => {
|
||||
if (res?.data) {
|
||||
this.tableData = res.data.records
|
||||
this.page.total = res.data.total
|
||||
}
|
||||
})
|
||||
},
|
||||
handleDelete(ids) {
|
||||
ids = ids?.toString()
|
||||
this.$confirm("确定要删除该条数据吗?").then(() => {
|
||||
this.instance.post(`/app/appvaccineinoculationuser/delete`, null, {
|
||||
params: {ids}
|
||||
}).then(res => {
|
||||
if (res?.code == 0) {
|
||||
this.$message.success("删除成功!");
|
||||
this.getTableData();
|
||||
}
|
||||
})
|
||||
}).catch(() => 0)
|
||||
},
|
||||
resetSearch() {
|
||||
this.page.current = 1
|
||||
this.search = {}
|
||||
this.getTableData()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.AppVaccination {
|
||||
height: 100%;
|
||||
|
||||
::v-deep .dataPane {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0 4px 6px -2px rgba(15, 15, 21, 0.15);
|
||||
border-radius: 2px;
|
||||
margin-bottom: 16px;
|
||||
margin-right: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 60px;
|
||||
|
||||
&:last-of-type {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .mainPane {
|
||||
background: #fff;
|
||||
padding: 12px 16px;
|
||||
box-shadow: 0 4px 6px -2px rgba(15, 15, 21, 0.15);
|
||||
|
||||
.vaccinationDate {
|
||||
border-bottom: 1px solid #D0D4DC;
|
||||
}
|
||||
|
||||
.ai-table__header {
|
||||
padding: 2px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user