pengjun
1 year ago
6 changed files with 552 additions and 259 deletions
-
2src/components/follow/FollowQuery.vue
-
177src/components/follow/PhoneFollowUp.vue
-
283src/components/follow/SmsSend.vue
-
0src/components/report/AppletRegisterInfo.vue
-
12src/router/index.js
-
337src/views/customerReport/unitStatistics.vue
@ -0,0 +1,337 @@ |
|||||
|
<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="patientRegister.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"; |
||||
|
|
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
dataList: [], //列表数据 |
||||
|
startDate: "", |
||||
|
endDate: "", |
||||
|
customerOrgIds: [], |
||||
|
flag: true |
||||
|
}; |
||||
|
}, |
||||
|
|
||||
|
created() { |
||||
|
this.dictInit(); |
||||
|
}, |
||||
|
|
||||
|
//挂载完成 |
||||
|
mounted() { |
||||
|
this.getNowTime(); |
||||
|
}, |
||||
|
|
||||
|
computed: { |
||||
|
...mapState(["window", "dict", "patientRegister", "report"]), |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
moment, |
||||
|
dddw, |
||||
|
//数据初始化 |
||||
|
dictInit() { |
||||
|
//体检单位树 |
||||
|
getapi("/api/app/customerorg/getbycodeall").then((res) => { |
||||
|
if (res.code == 1) { |
||||
|
this.patientRegister.customerOrgTreeAll = res.data; |
||||
|
tcdate(this.patientRegister.customerOrgTreeAll); |
||||
|
} |
||||
|
}); |
||||
|
console.log("patientRegister", this.patientRegister); |
||||
|
}, |
||||
|
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> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue