<style scoped>
|
.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 class="inspection_order">
|
<div style="width: 100%; height: 100%">
|
<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">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-input size="small" placeholder="请输入" clearable-->
|
<!-- @keyup.enter.native="refreshTable()"></el-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="padding-left: 70px;">总价：{{total}}</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"
|
>导出</el-button
|
>
|
</div>
|
</div>
|
<div class="table">
|
<!-- <ValueTable
|
ref="ValueTable"
|
:url="$api.insOrder.costStatistics"
|
:componentData="componentData"
|
:key="upIndex"
|
@handleWeave="handleWeave"
|
:column-min-width="'140'"
|
/> -->
|
<lims-table
|
:tableData="tableData"
|
:column="column"
|
:tableLoading="tableLoading"
|
:height="'calc(100vh - 270px)'"
|
: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 {
|
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,
|
};
|
},
|
mounted() {
|
this.getDates();
|
this.refreshTable();
|
this.entityCopy = this.HaveJson(this.entity);
|
},
|
methods: {
|
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({ cutPage, size }) {
|
this.page.current = cutPage;
|
this.page.size = size;
|
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>
|
