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.
315 lines
9.1 KiB
315 lines
9.1 KiB
<template>
|
|
<div class="box">
|
|
<div>
|
|
<div class="middlebox">
|
|
<div class="contenttitle">
|
|
客户报表 /
|
|
<span class="contenttitleBold">单位费用汇总</span>
|
|
</div>
|
|
</div>
|
|
<div :style="'display: block;'">
|
|
<div style="
|
|
background-color: #fff;
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 10px;
|
|
height: 35px;
|
|
margin-top: 7px;
|
|
">
|
|
<div class="query">
|
|
<span>体检单位：</span>
|
|
<el-cascader v-model="customerOrgIds" @change="onchange" placeholder="请选择单位" :options="customerOrgTreeAll"
|
|
:props="{
|
|
value: 'id',
|
|
label: 'displayName',
|
|
children: 'treeChildren',
|
|
expandTrigger: 'hover',
|
|
multiple: true,
|
|
emitPath: false,
|
|
checkStrictly: true
|
|
}" filterable size="small" collapse-tags></el-cascader>
|
|
</div>
|
|
<div class="query">
|
|
<span>开始日期：</span>
|
|
<el-date-picker type="date" placeholder="选择开始日期" size="small" v-model="startDate" value-format="yyyy-MM-dd"
|
|
editable style="width: 177px;">
|
|
</el-date-picker>
|
|
</div>
|
|
<div class="query">
|
|
<span>结束日期：</span>
|
|
<el-date-picker type="date" placeholder="选择结束日期" size="small" v-model="endDate" value-format="yyyy-MM-dd"
|
|
editable style="width: 177px;">
|
|
</el-date-picker>
|
|
</div>
|
|
<div class="query">
|
|
<el-button @click="btnQuery" size="small" class="commonbutton">查询</el-button>
|
|
</div>
|
|
<div class="query">
|
|
<el-button @click="handleExport" size="small" class="commonbutton">导出excel</el-button>
|
|
</div>
|
|
<div class="query">
|
|
<el-button @click="onPrint" size="small" class="commonbutton">打印</el-button>
|
|
</div>
|
|
</div>
|
|
<div ref="imageDom" style="background-color: #fff; padding: 15px; border-radius: 8px">
|
|
<el-table :data="dataList" border width="45%" :height="flag
|
|
? window.pageHeight < 600
|
|
? 415
|
|
: window.pageHeight - 185 - 20
|
|
: ''
|
|
" row-key="id" highlight-current-row ref="dataList" :row-class-name="tableRowClassName" id="table"
|
|
show-summary :summary-method="getSummaries">
|
|
<el-table-column prop="customerOrgName" label="单位" />
|
|
<el-table-column prop="medicalStartDate" label="体检开始日期" />
|
|
<el-table-column prop="registerCount" label="登记人数" />
|
|
<el-table-column prop="checkCount" label="实检人数" />
|
|
<el-table-column prop="registerStandardAmount" label="登记总金额" />
|
|
<el-table-column prop="registerChargeAmount" label="登记折后总金额" />
|
|
<el-table-column prop="checkStandardAmount" label="实检总金额" />
|
|
<el-table-column prop="checkChargeAmount" label="实检折后总金额" />
|
|
<el-table-column prop="checkItemStandardAmount" label="实检项目金额" />
|
|
<el-table-column prop="checkItemChargeAmount" label="实检项目折后总金额" />
|
|
</el-table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import moment from "moment";
|
|
import { mapState, mapActions } from "vuex";
|
|
import { getapi, postapi, putapi, deletapi } from "@/api/api";
|
|
import {
|
|
dddw,
|
|
objCopy,
|
|
arrayReduce,
|
|
arrayExistObj,
|
|
tcdate,
|
|
} from "@/utlis/proFunc";
|
|
import { exportToExcel } from "../../utlis/Export2Excel";
|
|
import html2canvas from "html2canvas";
|
|
import printJs from "print-js";
|
|
import { setDBCom, getDBCom } from "../../utlis/indexedDB";
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
dataList: [], //列表数据
|
|
startDate: "",
|
|
endDate: "",
|
|
customerOrgIds: [],
|
|
flag: true,
|
|
customerOrgTreeAll: [],
|
|
};
|
|
},
|
|
|
|
created() {
|
|
this.dictInit();
|
|
},
|
|
|
|
//挂载完成
|
|
mounted() {
|
|
this.getNowTime();
|
|
},
|
|
|
|
computed: {
|
|
...mapState(["window", "dict", "report"]),
|
|
},
|
|
|
|
methods: {
|
|
moment,
|
|
dddw,
|
|
|
|
//获取体检单位列表树信息
|
|
getCustomerOrgTree() {
|
|
getDBCom('orgDatasQuery')
|
|
.then(localData => {
|
|
let now = Date.now()
|
|
// 24小时 = 86400000 毫秒
|
|
if (localData?.createdat && now - 43200000 < localData.createdat) {
|
|
this.customerOrgTreeAll = localData.data;
|
|
tcdate(this.customerOrgTreeAll);
|
|
} else {
|
|
//体检单位树
|
|
getapi("/api/app/customerorg/getbycodeall").then((res) => {
|
|
if (res.code == 1) {
|
|
this.customerOrgTreeAll = res.data;
|
|
tcdate(this.customerOrgTreeAll);
|
|
//this.customerOrgTreeAll = reMadeOrgTree(deepCopy(res.data));
|
|
setDBCom('orgDatasQuery', res.data)
|
|
}
|
|
});
|
|
}
|
|
})
|
|
},
|
|
|
|
//数据初始化
|
|
dictInit() {
|
|
//体检单位树
|
|
this.getCustomerOrgTree()
|
|
|
|
},
|
|
onchange(v) {
|
|
console.log(v)
|
|
},
|
|
tableRowClassName({ row, rowIndex }) {
|
|
switch (row.isCharge) {
|
|
case "N":
|
|
return "danger";
|
|
default:
|
|
return "";
|
|
}
|
|
},
|
|
getSummaries(param) {
|
|
const { columns, data } = param;
|
|
const sums = [];
|
|
columns.forEach((column, index) => {
|
|
if (index === 0) {
|
|
sums[index] = "合计";
|
|
return;
|
|
}
|
|
if (index === 1) {
|
|
sums[index] = data.length + " 人";
|
|
}
|
|
});
|
|
|
|
return sums;
|
|
},
|
|
getNowTime() {
|
|
var now = new Date();
|
|
var year = now.getFullYear(); // 得到年份
|
|
var month = now.getMonth(); // 得到月份
|
|
var date = now.getDate(); // 得到日期
|
|
month = month + 1;
|
|
month = month.toString().padStart(2, "0");
|
|
date = date.toString().padStart(2, "0");
|
|
var defaultDate = `${year}-${month}-${date}`;
|
|
this.startDate = defaultDate;
|
|
this.endDate = defaultDate;
|
|
},
|
|
//查询
|
|
btnQuery() {
|
|
let that = this;
|
|
if (this.startDate == "") {
|
|
return this.$message({
|
|
message: "请先选择开始日期",
|
|
type: "error",
|
|
});
|
|
}
|
|
if (this.endDate == "") {
|
|
return this.$message({
|
|
message: "请先选择结束日期",
|
|
type: "error",
|
|
});
|
|
}
|
|
postapi(
|
|
"/api/app/CustomerReport/GetSummaryOfUnitCostsReport", {
|
|
customerOrgIds: that.customerOrgIds,
|
|
startDate: that.startDate,
|
|
endDate: that.endDate
|
|
}).then((res) => {
|
|
if (res.code != -1) {
|
|
that.dataList = res.data;
|
|
that.$nextTick(() => {
|
|
that.$refs.dataList.doLayout();
|
|
});
|
|
}
|
|
});
|
|
},
|
|
onPrint() {
|
|
this.flag = false;
|
|
this.$nextTick(() => {
|
|
let width = this.$refs.imageDom.style.width;
|
|
let cloneDom = this.$refs.imageDom.cloneNode(true);
|
|
let imageDom = this.$refs.imageDom;
|
|
cloneDom.style.position = "absolute";
|
|
cloneDom.style.top = "0px";
|
|
cloneDom.style.zIndex = "-1";
|
|
cloneDom.style.width = width;
|
|
console.log(cloneDom);
|
|
imageDom.appendChild(cloneDom);
|
|
html2canvas(cloneDom).then((canvas) => {
|
|
// 转成图片，生成图片地址
|
|
const url = canvas.toDataURL("image/png");
|
|
printJs({
|
|
printable: url,
|
|
type: "image",
|
|
documentTitle: "", // 标题
|
|
style: "@page{size:auto;margin: 0cm 1cm 0cm 1cm;}", // 去除页眉页脚
|
|
});
|
|
});
|
|
cloneDom.style.display = "none";
|
|
this.flag = true;
|
|
});
|
|
},
|
|
handleExport() {
|
|
exportToExcel("#table", "单位体检统计", false);
|
|
},
|
|
},
|
|
|
|
//监听事件
|
|
watch: {
|
|
//触发查询事件
|
|
// "patientRegister.query.times"(newVal, oldVal) {
|
|
// if (newVal != oldVal) {
|
|
// //alert('触发查询事件')
|
|
// this.query();
|
|
// }
|
|
// },
|
|
},
|
|
};
|
|
</script>
|
|
<style scoped>
|
|
@import "../../assets/css/global_button.css";
|
|
@import "../../assets/css/global_dialog.css";
|
|
@import "../../assets/css/global_table.css";
|
|
@import "../../assets/css/global_form.css";
|
|
@import "../../assets/css/global_input.css";
|
|
@import "../../assets/css/global.css";
|
|
|
|
.query {
|
|
margin-right: 10px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 14px;
|
|
color: #232748;
|
|
font-size: 400;
|
|
font-family: "NotoSansSC-Regular";
|
|
}
|
|
|
|
.box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
::v-deep .el-input__inner {
|
|
/*text-align: center;*/
|
|
padding-left: 5px;
|
|
padding-right: 15px;
|
|
}
|
|
|
|
::v-deep .el-input__icon {
|
|
width: 15px;
|
|
/* 输入框下拉箭头或清除图标 默认 25 */
|
|
}
|
|
|
|
::v-deep .el-input-group__append {
|
|
padding: 0 5px;
|
|
/* 控件默认 0 20px;*/
|
|
}
|
|
|
|
::v-deep .el-icon-search:before {
|
|
color: #00f;
|
|
}
|
|
|
|
.query:last-child {
|
|
margin-right: 0;
|
|
}
|
|
|
|
::v-deep .el-cascader__search-input {
|
|
margin: 0 0 0 5px;
|
|
}
|
|
</style>
|