<style scoped>
|
.costStatistics {
|
width: 100%;
|
height: 100%;
|
}
|
.title {
|
height: 60px;
|
line-height: 60px;
|
}
|
|
.search {
|
background-color: #fff;
|
height: 80px;
|
display: flex;
|
align-items: center;
|
}
|
|
.search_thing {
|
display: flex;
|
align-items: center;
|
height: 50px;
|
}
|
|
.search_label {
|
width: 120px;
|
font-size: 14px;
|
text-align: right;
|
}
|
|
.search_input {
|
width: calc(100% - 120px);
|
}
|
|
>>> .custom-statistic .el-statistic .head {
|
font-size: 25px;
|
}
|
|
.table {
|
margin-top: 10px;
|
background-color: #fff;
|
width: calc(100% - 40px);
|
height: calc(100% - 60px - 80px - 10px - 40px);
|
padding: 20px;
|
}
|
|
.el-form-item {
|
margin-bottom: 16px;
|
}
|
|
>>> .el-table tbody tr:hover > td {
|
background-color: transparent !important;
|
}
|
</style>
|
|
<template>
|
<div>
|
<div class="costStatistics bg-1">
|
<div>
|
<el-row class="title">
|
<el-col :span="12" style="padding-left: 20px; text-align: left"
|
>费用统计</el-col
|
>
|
<el-col :span="12" style="text-align: right">
|
<el-button
|
size="small"
|
type="primary"
|
v-hasPermi="['business:costStatistics:OA']"
|
>OA推送</el-button
|
>
|
</el-col>
|
</el-row>
|
</div>
|
<div class="search">
|
<div class="search_thing">
|
<div class="search_label">时间范围：</div>
|
<div class="search_input">
|
<el-date-picker
|
v-model="dates"
|
type="daterange"
|
range-separator="至"
|
format="yyyy-MM-dd"
|
value-format="yyyy-MM-dd"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
size="small"
|
@change="datesChange"
|
:key="index2"
|
>
|
</el-date-picker>
|
</div>
|
</div>
|
<div class="search_thing" style="width: 340px">
|
<div class="search_label">委托单位：</div>
|
<div class="search_input">
|
<el-select
|
@focus="getCompanyOptions"
|
@change="refreshTable()"
|
clearable
|
size="small"
|
v-model="entity.company"
|
style="width: 100%"
|
>
|
<el-option
|
v-for="item in companyOptions"
|
:key="item.value"
|
:label="item.label"
|
:value="item.label"
|
>
|
</el-option>
|
</el-select>
|
</div>
|
</div>
|
<div class="search_thing" style="padding-left: 30px">
|
<el-button size="small" @click="refresh()">重 置</el-button>
|
<el-button size="small" type="primary" @click="refreshTable()"
|
>查 询</el-button
|
>
|
</div>
|
<div class="search_thing" style="margin-left: 50px">
|
<div style="width: 100%; text-align: right">总价：</div>
|
<el-statistic
|
group-separator=","
|
:precision="2"
|
:value="total"
|
></el-statistic>
|
</div>
|
|
<div class="search_thing" style="padding-left: 70px">
|
<el-button
|
size="small"
|
type="primary"
|
@click="handleDown"
|
:loading="outLoading"
|
v-hasPermi="['business:costStatistics:export']"
|
>导出</el-button
|
>
|
</div>
|
</div>
|
<div class="table">
|
<lims-table
|
:tableData="tableData"
|
:parentSpanMethod="spanMethod"
|
:column="column"
|
:tableLoading="tableLoading"
|
:height="tableHeight"
|
:page="page"
|
@pagination="pagination"
|
></lims-table>
|
</div>
|
</div>
|
<el-dialog
|
title="在线编制"
|
:visible.sync="claimVisible"
|
width="70%"
|
:modal-append-to-body="false"
|
>
|
<Word style="height: 70vh" v-if="claimVisible" ref="Word" />
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="claimVisible = false">取 消</el-button>
|
<el-button type="primary" @click="confirmClaim">确 定</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import limsTable from "@/components/Table/lims-table.vue";
|
import {
|
costStatistics,
|
exportCommissionFees,
|
costStatistics2,
|
selectCustomPageList,
|
} from "../../../api/business/costStatistics";
|
|
export default {
|
components: {
|
limsTable,
|
},
|
data() {
|
return {
|
tableHeight: "",
|
tableData: [],
|
column: [
|
{
|
label: "下单时间",
|
prop: "createTime",
|
},
|
{
|
label: "委托编号",
|
prop: "entrustCode",
|
},
|
{
|
label: "样品名称",
|
prop: "sample",
|
},
|
{
|
label: "规格型号",
|
prop: "model",
|
},
|
{
|
label: "样品数量",
|
prop: "num",
|
},
|
{
|
label: "总价",
|
prop: "price",
|
},
|
{
|
label: "试验项目",
|
prop: "inspectionItem",
|
},
|
{
|
label: "委托单位",
|
prop: "company",
|
},
|
{
|
label: "委托人",
|
prop: "name",
|
},
|
],
|
tableLoading: false,
|
page: {
|
current: 1,
|
size: 20,
|
total: 0,
|
},
|
entity: {
|
company: null,
|
dates: null,
|
},
|
entityCopy: {},
|
upIndex: 0,
|
claimVisible: false,
|
dates: [],
|
index2: 0,
|
total: 0,
|
companyOptions: [], // 委托单位枚举值
|
outLoading: false,
|
};
|
},
|
created() {
|
this.getTableHeight();
|
},
|
mounted() {
|
this.getDates();
|
this.refreshTable();
|
this.entityCopy = this.HaveJson(this.entity);
|
},
|
methods: {
|
// 合并单元格
|
spanMethod({row, column, rowIndex, columnIndex}) {
|
// 委托单号相同的进行一个列合并
|
const mergeColumns = [1,2,8,9]
|
if (
|
mergeColumns.includes(columnIndex)
|
) {
|
// 如果是第一行， 或者上一行数据的委托单号和当前行的委托单号不一样
|
if (
|
rowIndex == 0 ||
|
row.entrustCode != this.tableData[rowIndex - 1].entrustCode
|
) {
|
// 计算需要合并的行数
|
let rowspan = 1;
|
while (
|
rowIndex + rowspan < this.tableData.length &&
|
row.entrustCode == this.tableData[rowIndex + rowspan].entrustCode
|
) {
|
rowspan++;
|
}
|
return [rowspan, 1];
|
} else {
|
return [0, 0];
|
}
|
} else {
|
// 其他列不合并
|
return [1, 1];
|
}
|
},
|
getTableHeight() {
|
const windowHeight = window.innerHeight;
|
this.tableHeight = windowHeight - 50 - 46 - 60 - 80 - 60 - 32 + "";
|
},
|
getData() {
|
this.tableLoading = true;
|
let params = { ...this.page, ...this.entity };
|
costStatistics(params).then((res) => {
|
this.tableData = res.data.records;
|
this.page.total = res.data.total;
|
this.tableLoading = false;
|
});
|
},
|
pagination({ page, limit }) {
|
this.page.current = page;
|
this.page.size = limit;
|
this.refreshTable();
|
},
|
|
handleDown() {
|
let data = {
|
company: this.entity.company ? this.entity.company : "",
|
startTime: this.dates[0],
|
endTime: this.dates[1],
|
};
|
this.outLoading = true;
|
exportCommissionFees(data).then((res) => {
|
const blod = new Blob([res], { type: "application/octet-stream" });
|
const url = URL.createObjectURL(blod);
|
const link = document.createElement("a");
|
link.href = url;
|
link.download = "委托费用统计.xlsx";
|
document.body.appendChild(link);
|
link.click();
|
this.$nextTick(() => {
|
this.$message.success("导出成功");
|
this.outLoading = false;
|
});
|
});
|
},
|
getTotal() {
|
costStatistics2(this.entity).then((res) => {
|
this.total = res.data.total;
|
});
|
},
|
getDates() {
|
//当前月第一天
|
var y = new Date().getFullYear(); //获取年份
|
var m = new Date().getMonth() + 1; //获取月份
|
var d = "01";
|
m = m < 10 ? "0" + m : m; //月份补 0
|
let startDate = [y, m, d].join("-");
|
//当前月最后一天
|
var y = new Date().getFullYear(); //获取年份
|
var m = new Date().getMonth() + 1; //获取月份
|
var d = new Date(y, m, 0).getDate(); //获取当月最后一日
|
m = m < 10 ? "0" + m : m; //月份补 0
|
d = d < 10 ? "0" + d : d; //日数补 0
|
let endDate = [y, m, d].join("-");
|
this.dates = [startDate, endDate];
|
this.index2++;
|
this.entity.dates = `["${startDate}","${endDate}"]`;
|
},
|
getCompanyOptions() {
|
selectCustomPageList({ ...this.page, ...this.entity })
|
.then((res) => {
|
const list = res.data.records;
|
this.companyOptions = [];
|
list.map((item) => {
|
const obj = Object.assign({
|
value: item.id,
|
label: item.company,
|
});
|
this.companyOptions.push(obj);
|
});
|
})
|
.catch((e) => {
|
this.$message.error("查询失败");
|
});
|
},
|
refreshTable() {
|
this.entity.dates = JSON.stringify(this.dates);
|
this.getData();
|
this.getTotal();
|
},
|
refresh() {
|
this.entity = this.HaveJson(this.entityCopy);
|
this.getDates();
|
this.getTotal();
|
this.$nextTick(() => {
|
this.getData();
|
});
|
},
|
handleWeave() {
|
this.claimVisible = true;
|
},
|
// 权限分配
|
getPower(radio) {
|
let power = JSON.parse(sessionStorage.getItem("power"));
|
let up = false;
|
let del = false;
|
let add = false;
|
for (var i = 0; i < power.length; i++) {
|
if (power[i].menuMethod == "upInsOrder") {
|
up = true;
|
}
|
if (power[i].menuMethod == "addInsOrder") {
|
add = true;
|
}
|
}
|
if (!up) {
|
this.componentData.do.splice(4, 1);
|
}
|
},
|
handleClose() {
|
this.upLoad = false;
|
},
|
confirmClaim() {
|
console.log(11111111111, this.$refs.Word.getValue());
|
},
|
datesChange(val) {
|
if (val == null) {
|
return;
|
}
|
this.componentData.entity.dates = JSON.stringify(val);
|
this.$refs["ValueTable"].selectList();
|
this.getTotal();
|
},
|
},
|
};
|
</script>
|
