You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
259 lines
7.4 KiB
259 lines
7.4 KiB
<template>
|
|
<div class="box" :style="CustomerOrgRightStyle">
|
|
<el-card class="cards">
|
|
<el-row>
|
|
<el-form ref="form" :model="form" label-width="120px">
|
|
<el-col :span="4">
|
|
<el-form-item label="单位">
|
|
<el-select
|
|
v-model="form.unit"
|
|
placeholder="请选择"
|
|
@focus="unitchang"
|
|
>
|
|
<el-option
|
|
v-for="item in customerorgdatas"
|
|
:key="item.id"
|
|
:label="item.displayName"
|
|
:value="item.id"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="4">
|
|
<el-form-item label="诊断" style="margin-left:-50px">
|
|
<el-select v-model="form.diagnosis" placeholder="请选择">
|
|
<el-option
|
|
v-for="item in diagnosisdata"
|
|
:key="item.id"
|
|
:label="item.displayName"
|
|
:value="item.id"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="4">
|
|
<el-form-item label="疾病来源" style="margin-left:-50px">
|
|
<el-select v-model="form.diagnosis" placeholder="请选择">
|
|
<el-option
|
|
v-for="item in diagnosisdata"
|
|
:key="item.id"
|
|
:label="item.displayName"
|
|
:value="item.id"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="3">
|
|
<el-button type="primary" style="margin-left: 10px">查询</el-button>
|
|
</el-col>
|
|
</el-form>
|
|
</el-row>
|
|
<!-- tab区域 -->
|
|
<h3 class="tabtitle">疾病人数统计</h3>
|
|
<el-table :data="tableData" style="width: 100%">
|
|
<el-table-column prop="disease" label="疾病" width="180">
|
|
</el-table-column>
|
|
<el-table-column prop="numberofpeople" label="人数" width="180">
|
|
</el-table-column>
|
|
<el-table-column prop="shareintotal" label="占总检人数百分比">
|
|
</el-table-column>
|
|
</el-table>
|
|
<!-- -->
|
|
<!-- 单位显示隐藏 -->
|
|
<div class="showbox">
|
|
<el-popover
|
|
placement="bottom"
|
|
width="600"
|
|
trigger="manual"
|
|
content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
|
|
v-model="visible"
|
|
>
|
|
<div>
|
|
<span>单位查找</span>
|
|
<el-select
|
|
v-model="form.unit"
|
|
placeholder="请选择"
|
|
style="margin-left: 10px"
|
|
>
|
|
<el-option
|
|
v-for="item in customerorgdata"
|
|
:key="item.id"
|
|
:label="item.displayName"
|
|
:value="item.id"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
</div>
|
|
<!-- 标题 -->
|
|
<div class="biaoti">
|
|
双击单位下的体检次数或部门可增加查询条件双击列表中的行可删除查询条件
|
|
</div>
|
|
<div class="boxflex">
|
|
<div class="leftbox">
|
|
<el-tree :data="customerorgdata" :props="defaultProps"></el-tree>
|
|
</div>
|
|
<div class="rigtbox">
|
|
<el-table :data="tableData" style="width: 100%">
|
|
<el-table-column prop="numberofpeople" label="单位">
|
|
</el-table-column>
|
|
<el-table-column prop="numberofpeople" label="次数">
|
|
</el-table-column>
|
|
<el-table-column prop="shareintotal" label="日期">
|
|
</el-table-column>
|
|
</el-table>
|
|
<div style="margin-top: 10px">登记日期方式</div>
|
|
<el-radio-group v-model="radio">
|
|
<el-radio :label="3">登记日期</el-radio>
|
|
<el-radio :label="6">体检日期</el-radio>
|
|
<el-radio :label="9">总检日期</el-radio>
|
|
</el-radio-group>
|
|
<div style="margin-top: 10px">单位选择方式</div>
|
|
<el-radio-group v-model="radio">
|
|
<el-radio :label="3">选择单位</el-radio>
|
|
<el-radio :label="6">不选单位</el-radio>
|
|
</el-radio-group>
|
|
<!-- -->
|
|
<div>
|
|
<el-button style="margin-left: 100%" @click="close"
|
|
>关闭</el-button
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-popover>
|
|
</div>
|
|
|
|
<!-- -->
|
|
</el-card>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { getapi, postapi } from "@/api/api";
|
|
import { mapState } from "vuex";
|
|
export default {
|
|
data() {
|
|
return {
|
|
radio: "",
|
|
defaultProps: {
|
|
label: "displayName",
|
|
children: "treeChildren",
|
|
},
|
|
visible: false,
|
|
form: {
|
|
unit: "",
|
|
diagnosis: "",
|
|
},
|
|
CustomerOrgTreeStyle: "",
|
|
CustomerOrgRightStyle: "",
|
|
customerorgdatas: [],
|
|
tableData: [
|
|
{
|
|
disease: "是,否",
|
|
numberofpeople: "20",
|
|
shareintotal: "30",
|
|
},
|
|
],
|
|
customerorgdata: [],
|
|
diagnosisdata: [],
|
|
};
|
|
},
|
|
computed: {
|
|
...mapState(["window", "dict", "patientRegister", "customerOrg"]),
|
|
},
|
|
created() {
|
|
// this.resize();
|
|
},
|
|
mounted() {
|
|
this.obtainingunits();
|
|
this.getdiagnosis();
|
|
},
|
|
methods: {
|
|
resize() {
|
|
//console.log(this.window.pageHeight,this.window.pageWidth)
|
|
let headerHeight = Number(150);
|
|
|
|
this.CustomerOrgTreeStyle =
|
|
"overflow: scroll;border: 1px solid;width:200px; height:" +
|
|
(this.window.pageHeight - headerHeight) +
|
|
"px;";
|
|
this.CustomerOrgRightStyle =
|
|
"margin-left: 10px;width:" +
|
|
(this.window.pageWidth - 200 - 60) +
|
|
"px; height:" +
|
|
(this.window.pageHeight - headerHeight) +
|
|
"px;";
|
|
|
|
if (this.window.pageHeight < 600) {
|
|
this.CustomerOrgTreeStyle =
|
|
"overflow: scroll;border: 1px solid;width:200px; height:" +
|
|
(600 - headerHeight) +
|
|
"px;";
|
|
}
|
|
},
|
|
close() {
|
|
this.visible = false;
|
|
},
|
|
// /api/app/customer-org/by-code-all
|
|
unitchang() {
|
|
console.log("1");
|
|
this.visible = true;
|
|
console.log(this.visible);
|
|
getapi("/api/app/customer-org/by-code-all").then((res) => {
|
|
this.customerorgdata = res.data;
|
|
});
|
|
},
|
|
//获取单位
|
|
obtainingunits() {
|
|
getapi("/api/app/customer-org/by-code-all").then((res) => {
|
|
this.customerorgdata = res.data;
|
|
});
|
|
},
|
|
//获取诊断
|
|
getdiagnosis() {
|
|
postapi("/api/app/diagnosis/getlistinfilter").then((res) => {
|
|
this.diagnosisdata = res.data.items;
|
|
console.log(res);
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style scoped>
|
|
.rigtbox {
|
|
margin-left: 10px;
|
|
}
|
|
.leftbox {
|
|
width: 30%;
|
|
border: 1px solid #ccc;
|
|
}
|
|
.boxflex {
|
|
display: flex;
|
|
}
|
|
.biaoti {
|
|
margin-top: 10px;
|
|
}
|
|
/* .el-select-dropdown__empty::v-deep {
|
|
display: none;
|
|
} */
|
|
.el-popover .el-popper .el-popover--plain {
|
|
width: 600px;
|
|
}
|
|
.showbox {
|
|
width: 600px;
|
|
height: 300px;
|
|
/* border: 1px solid #ccc; */
|
|
position: absolute;
|
|
left: 8.5%;
|
|
top: 140px;
|
|
}
|
|
.cards {
|
|
height: 800px;
|
|
}
|
|
.tabtitle {
|
|
text-align: center;
|
|
margin-top: 20px;
|
|
}
|
|
</style>
|