罗斌杰
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